Android 九宫格布局

127次浏览

效果图

实现思路:

1.使用GridView来实现九宫格布局,设置numColumns=3。

2.图标使用的是Font Awesome矢量图标,详情可以参考Android 在APP中使用 Font Awesome 图标_.fa-headphones_清山博客的博客-CSDN博客

实现步骤:

1.布局文件:activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <!--标题-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center">
        <TextView
            android:id="@+id/txtTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="60dp"
            android:textColor="@color/black"
            android:textSize="20dp"
            android:layout_weight="1"
            android:text="@string/app_name"
            android:textAlignment="center" />
    </LinearLayout>

    <!--九宫格-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:paddingLeft="20dp"
        android:textAlignment="center">
        <GridView
            android:id="@+id/gridView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="3"
            android:textAlignment="center"
            android:verticalSpacing="25dp">

        </GridView>
    </LinearLayout>

</LinearLayout>

就一个标题和一个GridView两部分组成。

activity_main_menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="15dp">

        <TextView
            android:id="@+id/txtIco"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="10dp"
            android:textColor="@color/black"
            android:text="图标"
            android:textSize="36dp" />

        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="名称" />
    </LinearLayout>
</LinearLayout>

2.后置文件 MainActivity.java

package com.qingshanblog;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.ActionBar;

public class MainActivity extends BaseActivity {

    GridView gridView;
    public int[] menu = new int[]{R.string.menu_blog, R.string.menu_qrlogin, R.string.menu_location, R.string.menu_scan, R.string.menu_camera, R.string.menu_config};
    public int[] ico = new int[]{R.string.fa_blog, R.string.fa_unlock, R.string.fa_location, R.string.fa_qr, R.string.fa_camera, R.string.fa_config};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //不显示标题
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
        SetStatusBarTransparent();//状态栏透明
        SetStatusBarTextColor(true);//状态栏文字变黑

        gridView = (GridView) findViewById(R.id.gridView);
        MenuAdapter adapter = new MenuAdapter();
        gridView.setAdapter(adapter);
    }


    public class MenuAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return menu.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(final int i, View view, ViewGroup viewGroup) {
            View view1 = View.inflate(MainActivity.this, R.layout.activity_main_menu_item, null);

            //单个按钮布局
            LinearLayout layout = (LinearLayout) view1.findViewById(R.id.layMenu);
            layout.setTag(menu[i]);
            layout.setOnClickListener(view2 -> {
                LinearLayout txt = (LinearLayout) view2;
                int name = (int) txt.getTag();
                Intent t;
                switch (name) {
                    case R.string.menu_blog:
                        t = new Intent(MainActivity.this, BlogActivity.class);
                        startActivity(t);
                        break;
                    case R.string.menu_qrlogin: 
                        break;
                    case R.string.menu_location:
                        t = new Intent(MainActivity.this, LocationActivity.class);
                        startActivity(t);
                        break;
                    case R.string.menu_scan:
                        t = new Intent(MainActivity.this, ScanActivity.class);
                        startActivity(t);
                        break;
                    case R.string.menu_camera:
                        t = new Intent(MainActivity.this, CameraActivity.class);
                        startActivity(t);
                        break;
                    case R.string.menu_config:
                        t = new Intent(MainActivity.this, ConfigActivity.class);
                        startActivity(t);
                        break; 
                    default:
                        Toast toast = Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT);
                        toast.show();
                        break;
                }
            });

            //设置图标
            TextView txtIco = view1.findViewById(R.id.txtIco);
            txtIco.setTypeface(AppContext._font);
            txtIco.setText(ico[i]);

            //设置菜单
            TextView txtName = view1.findViewById(R.id.txtName);
            txtName.setText(menu[i]); 
            return view1;

        }

    }
 
}
BaseActivity.java 主要就2个方法,用来隐藏顶部状态栏,如果不需要,则可以不用。
package com.qingshanblog;

import android.os.Build;
import android.view.View;
import android.view.WindowManager;

import androidx.appcompat.app.AppCompatActivity;

public class BaseActivity extends AppCompatActivity {

    //设置状态栏字体为黑色
    protected void SetStatusBarTextColor(boolean isBlack) {
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.M) {
            if (isBlack) {
                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);//设置状态栏黑色字体
            } else {
                getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);//恢复状态栏白色字体
            }
        }
    }

    //设置半透明状态栏
    protected void SetStatusBarTransparent() {
        if (Build.VERSION.SDK_INT >= 21) {//21表示5.0
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
            decorView.setSystemUiVisibility(option);
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        } else if (Build.VERSION.SDK_INT >= 19) {//19表示4.4
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //虚拟键盘也透明
            //getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }
    }
}

3.用到的资源文件 string.xml

<resources>
    <string name="app_name">清山博客</string>
    <!--九宫格导航菜单-->
    <string name="menu_blog">清山博客</string>
    <string name="menu_qrlogin">扫码登录</string>
    <string name="menu_location">定位示例</string>
    <string name="menu_scan">扫描识别</string>
    <string name="menu_camera">拍照上传</string>
    <string name="menu_config">参数配置</string>

    <!--参考:http://www.htmleaf.com/ziliaoku/font-awesome/font-awesome-4-4-0.html-->
    <string name="fa_users">&#xf0c0;</string>
    <string name="fa_blog">&#xf268;</string>
    <string name="fa_qr">&#xf06e;</string>
    <string name="fa_location">&#xf124;</string>
    <string name="fa_unlock">&#xf108;</string>
    <string name="fa_camera">&#xf030;</string>
    <string name="fa_config">&#xf013;</string>

</resources>

文件目录结构

发表评论

电子邮件地址不会被公开。 必填项已用*标注