效果图
实现思路:
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_weight="0.2"
android:gravity="top"
android:orientation="vertical"
android:padding="10dp"
android:textAlignment="center">
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:numColumns="3"
android:stretchMode="columnWidth"
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:id="@+id/layMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_columnWeight="1"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp">
<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:text="图标"
android:textColor="@color/black"
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>
关键设置
GridView
android:layout_centerInParent="true" android:numColumns="3" android:stretchMode="columnWidth"
内部Item
android:layout_columnWeight="1" android:gravity="center" android:orientation="vertical"
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"></string>
<string name="fa_blog"></string>
<string name="fa_qr"></string>
<string name="fa_location"></string>
<string name="fa_unlock"></string>
<string name="fa_camera"></string>
<string name="fa_config"></string>
</resources>
文件目录结构文章来源:https://www.toymoban.com/news/detail-699069.html
文章来源地址https://www.toymoban.com/news/detail-699069.html
到了这里,关于Android 九宫格布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!