目录
2.2.1新建四个fragment:将fragment与对应的layout文件相关联
一、设计目标
1.1 设计要求
完成微信页面的设计,包括4个 fragment
1.2 设计功能介绍
分为3层,第一层是微信名,第二层是页面,第三层是按钮。不同按钮按了会显示不一样的画面。
二、界面设计详解
2.1 UI布局设计
2.1.1 准备图片
需要提前准备8张png格式的图片,存放到drawable文件夹中。
比如我的链接D:\Android\hallo\app\src\main\res\drawable
或者as里面的文件夹打开方式:app--->res--->右击drawable--->Open In--->explorer,
如下图所示:
2.1.2 顶端top.xml
1.在layout中新建top.xml,步骤如下所示
app--->res--->右击layout--->New--->XML--->Layout XML File
找到textview复制到下面框里
编辑coad
加入下列代码:
其中采用了相对布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/g3"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<TextView
android:id="@+id/testValue1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/name1"
android:textColor="@color/black1"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2.1.3 底端button.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"
android:layout_width="match_parent"
android:background="@color/w1"
android:layout_height="100dp"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/layout_weixin"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/g4"
android:orientation="vertical">
<ImageButton
android:id="@+id/tu1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/w1"
android:clickable="false"
android:contentDescription="@string/textValue1"
android:src="@drawable/tu_weixin" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:gravity="center_horizontal"
android:text="@string/textValue1"
android:textColor="@color/b1"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_lxr"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/g4"
android:orientation="vertical">
<ImageButton
android:id="@+id/tu2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/w1"
android:clickable="false"
android:contentDescription="@string/textValue2"
android:src="@drawable/tu_lxr" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/textValue2"
android:clickable="false"
android:textColor="@color/b1"
android:textStyle="bold"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_space"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/g4"
android:orientation="vertical">
<ImageButton
android:id="@+id/tu3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/w1"
android:clickable="false"
android:contentDescription="@string/textValue3"
android:src="@drawable/tu_space" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/textValue3"
android:clickable="false"
android:textColor="@color/b1"
android:textStyle="bold"
android:textSize="30sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/layout_mine"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/g4"
android:orientation="vertical">
<ImageButton
android:id="@+id/tu4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@color/w1"
android:clickable="false"
android:contentDescription="@string/textValue4"
android:src="@drawable/tu_mine" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/textValue4"
android:clickable="false"
android:textColor="@color/b1"
android:textStyle="bold"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
完成后如图:
2.1.4 Layout_Main.xml
1.删除原有的activity_main.xml,在layout中新建Layout_Main.xml,步骤如下所示:
app--->res--->右击layout--->New--->XML--->Layout XML File
2.通过两个include引入top和bottom
3.在两个include中加入控件FrameLayout如下图
代码如下:
<?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"
android:orientation="vertical">
<include
layout="@layout/top"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_weight="0" />
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
完成配置后如图:
2.2 MainActivity代码配置
2.2.1新建四个fragment:将fragment与对应的layout文件相关联
新建java文件,一般xml文件也会在Layout中同步新建
app--->右击java--->New--->Fragment--->Fragment(Blank)
我的名字是frament_weixin
其中的代码是自动配置好的
2.2.2完善相应的四个fragment.xml
步骤与top.xml、bottom.xml步骤类似,首先找到textView控件,然后拖入FrameLayout下面,最后配置cod
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment_weixin">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="@string/textValue5"
android:textSize="40sp"
android:textStyle="bold" />
</FrameLayout>
2.2.3编写MainActivity文件的Java代码
(1)加载fragment:首先获取四个fragment对象,然后定义initFragment()方法,将这四个fragment加载到activity_main文件的FrameLayout中去
初始化函数
找到响应区:我们需要对底部四个控件进行点击事件的监听,因此定义initView()方法找到响应区。为了增强用户体验感,用户点击时只需要点击LinearLayout包含的区域即可触发tab切换另外点击图片时图片资源会发生改变,因此也需获取图片对象。
定义事件启动函数:MainActivity实现接口View.OnClickListener,默认会对界面进行全屏监听,这里我们只需要对四个控件进行监听
控制tab变换:自定义setSelect(int i)函数来显示不同界面内容。一共有四个tab,我们给每个tab设置一个index作为标记,第一个tab为0,第二个tab为1,以此类推,默认index为0。当点击到第i个tab时,需要显示该界面内容,并且将图片变为绿色。要实现此功能,需要先将所有界面都隐藏,再通过switch来匹配,将标记i对应的界面展示出来,并修改图片。函数hideFragment()实现隐藏所有界面功能。
重写onClick方法:用户点击哪个tab,就调用setSelect方法设置对应的i值。注意这里还需要对图片进行统一变灰处理。resetImgs方法实现该功能。
调用所需函数
完成main的配置