android首页制作
分析
1.根据页面分析使用几个部分组成
分析好页面,制作首页布局代码如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:radius="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/QQ图片20201020111229"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="359dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="170dp"
android:gravity="center"
android:orientation="vertical">
<!--头部标题部分-->
<LinearLayout
android:layout_width="350dp"
android:layout_height="match_parent"
android:background="@drawable/index_shape"
android:gravity="center">
<LinearLayout
android:layout_width="138dp"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:background="@drawable/title_shape"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="37dp"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:text="部队管理"
android:textColor="#ffffff"
android:textSize="18dp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 干部申请 "
android:textColor="#0a0943"
android:textSize="18dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="|"
android:textSize="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="灭火救援"
android:textColor="#0a0943"
android:textSize="18dp" />
</LinearLayout>
<!--小图标部分-->
<ImageView
android:layout_width="25dp"
android:layout_height="10dp"
android:layout_gravity="center"
android:layout_marginLeft="-100dp"
android:background="@drawable/biao" />
<!-- 网格布局部分-->
<GridLayout
android:layout_width="350dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="@color/cardview_dark_background"
android:columnCount="3"
android:rowCount="4">
<LinearLayout
android:layout_width="215dp"
android:layout_height="84dp"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo1" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="0"
android:layout_column="2"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo2" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="1"
android:layout_column="0"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo3" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="1"
android:layout_column="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo4" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="1"
android:layout_column="2"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo5" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="2"
android:layout_column="0"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo6" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="2"
android:layout_column="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo7" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="2"
android:layout_column="2"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo8" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="3"
android:layout_column="0"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo9" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="3"
android:layout_column="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo10" />
</LinearLayout>
<LinearLayout
android:layout_width="107dp"
android:layout_height="84dp"
android:layout_row="3"
android:layout_column="2"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/white"
android:gravity="center">
<ImageView
android:layout_width="55dp"
android:layout_height="55dp"
android:background="@drawable/btn_logo11" />
</LinearLayout>
</GridLayout>
</LinearLayout>
<!--底部部分-->
<!-- 框线-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
<View
android:layout_height="1dp"
android:layout_width="wrap_content"
android:background="#444444"
android:layout_marginBottom="-15dp"
android:layout_marginTop="10dp"
/>
<!-- 框线结束-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_marginTop="15dp"
android:background="#ffffff"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/logo2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="30dp"
android:text="首页"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/logo2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="30dp"
android:text="消息"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/logo3" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:text="个人中心"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
利用shap.xml在center.xml中添加android:background="@drawable/shape",使得文本框变为圆角的。
在设计界面展示图如下