当前位置:   article > 正文

Android 九宫格布局_android九宫格布局

android九宫格布局

效果图

实现思路:

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

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

实现步骤:

1.布局文件:activity_main.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context=".MainActivity"
  8. android:orientation="vertical">
  9. <!--标题-->
  10. <LinearLayout
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content"
  13. android:textAlignment="center">
  14. <TextView
  15. android:id="@+id/txtTitle"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_marginTop="60dp"
  19. android:textColor="@color/black"
  20. android:textSize="20dp"
  21. android:layout_weight="1"
  22. android:text="@string/app_name"
  23. android:textAlignment="center" />
  24. </LinearLayout>
  25. <!--九宫格-->
  26. <LinearLayout
  27. android:layout_width="match_parent"
  28. android:layout_height="wrap_content"
  29. android:layout_weight="0.2"
  30. android:gravity="top"
  31. android:orientation="vertical"
  32. android:padding="10dp"
  33. android:textAlignment="center">
  34. <GridView
  35. android:id="@+id/gridView"
  36. android:layout_width="match_parent"
  37. android:layout_height="wrap_content"
  38. android:layout_centerInParent="true"
  39. android:numColumns="3"
  40. android:stretchMode="columnWidth"
  41. android:verticalSpacing="25dp"></GridView>
  42. </LinearLayout>
  43. </LinearLayout>

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

activity_main_menu_item.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/layMenu"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:layout_columnWeight="1"
  7. android:gravity="center"
  8. android:orientation="vertical"
  9. android:padding="10dp">
  10. <TextView
  11. android:id="@+id/txtIco"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:layout_gravity="center_horizontal"
  15. android:layout_marginBottom="10dp"
  16. android:text="图标"
  17. android:textColor="@color/black"
  18. android:textSize="36dp" />
  19. <TextView
  20. android:id="@+id/txtName"
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_gravity="center_horizontal"
  24. android:text="名称" />
  25. </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

  1. package com.qingshanblog;
  2. import android.content.Intent;
  3. import android.os.Bundle;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.BaseAdapter;
  7. import android.widget.GridView;
  8. import android.widget.LinearLayout;
  9. import android.widget.TextView;
  10. import android.widget.Toast;
  11. import androidx.appcompat.app.ActionBar;
  12. public class MainActivity extends BaseActivity {
  13. GridView gridView;
  14. 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};
  15. 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};
  16. @Override
  17. protected void onCreate(Bundle savedInstanceState) {
  18. super.onCreate(savedInstanceState);
  19. setContentView(R.layout.activity_main);
  20. //不显示标题
  21. ActionBar actionBar = getSupportActionBar();
  22. if (actionBar != null) {
  23. actionBar.hide();
  24. }
  25. SetStatusBarTransparent();//状态栏透明
  26. SetStatusBarTextColor(true);//状态栏文字变黑
  27. gridView = (GridView) findViewById(R.id.gridView);
  28. MenuAdapter adapter = new MenuAdapter();
  29. gridView.setAdapter(adapter);
  30. }
  31. public class MenuAdapter extends BaseAdapter {
  32. @Override
  33. public int getCount() {
  34. return menu.length;
  35. }
  36. @Override
  37. public Object getItem(int i) {
  38. return null;
  39. }
  40. @Override
  41. public long getItemId(int i) {
  42. return 0;
  43. }
  44. @Override
  45. public View getView(final int i, View view, ViewGroup viewGroup) {
  46. View view1 = View.inflate(MainActivity.this, R.layout.activity_main_menu_item, null);
  47. //单个按钮布局
  48. LinearLayout layout = (LinearLayout) view1.findViewById(R.id.layMenu);
  49. layout.setTag(menu[i]);
  50. layout.setOnClickListener(view2 -> {
  51. LinearLayout txt = (LinearLayout) view2;
  52. int name = (int) txt.getTag();
  53. Intent t;
  54. switch (name) {
  55. case R.string.menu_blog:
  56. t = new Intent(MainActivity.this, BlogActivity.class);
  57. startActivity(t);
  58. break;
  59. case R.string.menu_qrlogin:
  60. break;
  61. case R.string.menu_location:
  62. t = new Intent(MainActivity.this, LocationActivity.class);
  63. startActivity(t);
  64. break;
  65. case R.string.menu_scan:
  66. t = new Intent(MainActivity.this, ScanActivity.class);
  67. startActivity(t);
  68. break;
  69. case R.string.menu_camera:
  70. t = new Intent(MainActivity.this, CameraActivity.class);
  71. startActivity(t);
  72. break;
  73. case R.string.menu_config:
  74. t = new Intent(MainActivity.this, ConfigActivity.class);
  75. startActivity(t);
  76. break;
  77. default:
  78. Toast toast = Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT);
  79. toast.show();
  80. break;
  81. }
  82. });
  83. //设置图标
  84. TextView txtIco = view1.findViewById(R.id.txtIco);
  85. txtIco.setTypeface(AppContext._font);
  86. txtIco.setText(ico[i]);
  87. //设置菜单
  88. TextView txtName = view1.findViewById(R.id.txtName);
  89. txtName.setText(menu[i]);
  90. return view1;
  91. }
  92. }
  93. }
BaseActivity.java 主要就2个方法,用来隐藏顶部状态栏,如果不需要,则可以不用。
  1. package com.qingshanblog;
  2. import android.os.Build;
  3. import android.view.View;
  4. import android.view.WindowManager;
  5. import androidx.appcompat.app.AppCompatActivity;
  6. public class BaseActivity extends AppCompatActivity {
  7. //设置状态栏字体为黑色
  8. protected void SetStatusBarTextColor(boolean isBlack) {
  9. if (Build.VERSION.SDK_INT > Build.VERSION_CODES.M) {
  10. if (isBlack) {
  11. getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);//设置状态栏黑色字体
  12. } else {
  13. getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);//恢复状态栏白色字体
  14. }
  15. }
  16. }
  17. //设置半透明状态栏
  18. protected void SetStatusBarTransparent() {
  19. if (Build.VERSION.SDK_INT >= 21) {//21表示5.0
  20. View decorView = getWindow().getDecorView();
  21. int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
  22. decorView.setSystemUiVisibility(option);
  23. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  24. } else if (Build.VERSION.SDK_INT >= 19) {//19表示4.4
  25. getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
  26. //虚拟键盘也透明
  27. //getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
  28. }
  29. }
  30. }

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

  1. <resources>
  2. <string name="app_name">清山博客</string>
  3. <!--九宫格导航菜单-->
  4. <string name="menu_blog">清山博客</string>
  5. <string name="menu_qrlogin">扫码登录</string>
  6. <string name="menu_location">定位示例</string>
  7. <string name="menu_scan">扫描识别</string>
  8. <string name="menu_camera">拍照上传</string>
  9. <string name="menu_config">参数配置</string>
  10. <!--参考:http://www.htmleaf.com/ziliaoku/font-awesome/font-awesome-4-4-0.html-->
  11. <string name="fa_users">&#xf0c0;</string>
  12. <string name="fa_blog">&#xf268;</string>
  13. <string name="fa_qr">&#xf06e;</string>
  14. <string name="fa_location">&#xf124;</string>
  15. <string name="fa_unlock">&#xf108;</string>
  16. <string name="fa_camera">&#xf030;</string>
  17. <string name="fa_config">&#xf013;</string>
  18. </resources>

文件目录结构

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/949517
推荐阅读
相关标签
  

闽ICP备14008679号