安卓开发——UI界面开发

功能说明

开发一个类似微信的主页面框架,UI布局为上中下结构,包含4个tab界面：

1. 页面顶部为页面标题

2. 页面底部为导航栏

3. 页面中部为内容展示界面

开发技术

layout xml,控件,监听,fragment

设计流程及代码详解

创建项目

1. 选择File->New->New Project

2. 空项目

3. 项目设置

选择java项目

UI界面

该UI界面由多个xml布局页面组成：

• 顶部标题栏 : app的标题,即"微信",标题居中显示

• 中间内容界面 : 共"微信""通讯录""发现""我"四个界面,分别显示不同内容

• 底部导航栏 : 一共四个图标,分别控制中间内容界面

顶部标题栏

由于页面顶部就只有微信两个字,所以使用线性布局

在Design界面将TextView拖到下面

在Code界面按照下图设置

标题栏toplayout.xml

1.  
   <?xml version="1.0" encoding="utf-8"?>
2.  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  
   android:layout_width="match_parent"
4.  
   android:layout_height="match_parent">
5.  
    
6.  
   <TextView
7.  
   android:id="@ id/textView"
8.  
   android:layout_width="wrap_content"
9.  
   android:layout_height="wrap_content"
10.  
    android:layout_weight="1"
11.  
    android:text="微信"
12.  
    android:layout_gravity="center"
13.  
    android:gravity="center"
14.  
    android:textSize="35dp"
15.  
    />
16.  
    </LinearLayout>

底部导航栏

按照上述方式创建底部导航栏，页面布局同样选择LinearLayout

对于底部的导航栏，应该由四个部分组成，水平排列，而这四个部分又分别由两个部分组成——图标和文字。

然后将该部分复制4个并重命名

复制后发现只有第一个图标展示，其他的图标全部都在一条线上，所以要对四个部分的代码进行如下图更改

其中layout_weight="1"指的是四个控件平分父控件空间

之后再在每一个TextView中添加文字居中的属性，并且更改每一个部分的图片和文字，即可达到以下效果

底部bottomlayout.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.  
   android:layout_width="match_parent"
5.  
   android:layout_height="wrap_content">
6.  
    
7.  
    
8.  
   <LinearLayout
9.  
   android:id="@ id/layout1"
10.  
    android:layout_width="match_parent"
11.  
    android:layout_height="wrap_content"
12.  
    android:layout_weight="1"
13.  
    android:orientation="vertical">
14.  
     
15.  
    <ImageView
16.  
    android:id="@ id/imageView1"
17.  
    android:layout_width="match_parent"
18.  
    android:layout_height="wrap_content"
19.  
    android:layout_weight="1"
20.  
    app:srcCompat="@android:drawable/sym_action_chat" />
21.  
     
22.  
    <TextView
23.  
    android:id="@ id/textView1"
24.  
    android:layout_width="match_parent"
25.  
    android:layout_height="wrap_content"
26.  
    android:gravity="center"
27.  
    android:text="微信" />
28.  
     
29.  
    </LinearLayout>
30.  
     
31.  
    <LinearLayout
32.  
    android:id="@ id/layout2"
33.  
    android:layout_width="match_parent"
34.  
    android:layout_height="wrap_content"
35.  
    android:layout_weight="1"
36.  
    android:orientation="vertical">
37.  
     
38.  
    <ImageView
39.  
    android:id="@ id/imageView2"
40.  
    android:layout_width="match_parent"
41.  
    android:layout_height="wrap_content"
42.  
    app:srcCompat="@android:drawable/ic_menu_myplaces" />
43.  
     
44.  
    <TextView
45.  
    android:id="@ id/textView2"
46.  
    android:layout_width="match_parent"
47.  
    android:layout_height="wrap_content"
48.  
    android:gravity="center"
49.  
    android:text="通讯录" />
50.  
     
51.  
    </LinearLayout>
52.  
     
53.  
    <LinearLayout
54.  
    android:id="@ id/layout3"
55.  
    android:layout_width="match_parent"
56.  
    android:layout_height="wrap_content"
57.  
    android:layout_weight="1"
58.  
    android:orientation="vertical">
59.  
     
60.  
    <ImageView
61.  
    android:id="@ id/imageView3"
62.  
    android:layout_width="match_parent"
63.  
    android:layout_height="wrap_content"
64.  
    app:srcCompat="@android:drawable/ic_menu_share" />
65.  
     
66.  
    <TextView
67.  
    android:id="@ id/textView3"
68.  
    android:layout_width="match_parent"
69.  
    android:layout_height="wrap_content"
70.  
    android:gravity="center"
71.  
    android:text="发现" />
72.  
     
73.  
    </LinearLayout>
74.  
     
75.  
    <LinearLayout
76.  
    android:id="@ id/layout4"
77.  
    android:layout_width="match_parent"
78.  
    android:layout_height="wrap_content"
79.  
    android:layout_weight="1"
80.  
    android:orientation="vertical">
81.  
     
82.  
    <ImageView
83.  
    android:id="@ id/imageView4"
84.  
    android:layout_width="match_parent"
85.  
    android:layout_height="wrap_content"
86.  
    app:srcCompat="@android:drawable/ic_menu_search" />
87.  
     
88.  
    <TextView
89.  
    android:id="@ id/textView4"
90.  
    android:layout_width="match_parent"
91.  
    android:layout_height="wrap_content"
92.  
    android:gravity="center"
93.  
    android:text="我" />
94.  
     
95.  
    </LinearLayout>
96.  
    </LinearLayout>

页面整合

由于中间的部分是会随着下面图标的点击变动的，所以后面再设置，我们先把顶部、中部和底部进行页面定位整合.

按照上面的方式创建mainlayout界面,仍然选择的是linearlayout,但是由于上中下三个部分在该页面是垂直分布，所以和上面不同的是要在最大的Linearlayout标签中添加：

然后将前面设置的顶部和底部添加到mainlayout中

但是如果这样设置，那么三个界面将会贴在一起，所以可以设置layout_weight

(这里不太确定，感觉这样设置有点奇怪，但是最后界面展现是正确的)

最后界面展现如下:

mainlayout.xml

1.  
   <?xml version="1.0" encoding="utf-8"?>
2.  
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  
   android:layout_width="match_parent"
4.  
   android:layout_height="match_parent"
5.  
   android:orientation="vertical">
6.  
    
7.  
   <include
8.  
   layout="@layout/toplayout"
9.  
   android:layout_width="match_parent"
10.  
    android:layout_height="wrap_content"
11.  
    android:layout_weight="1" />
12.  
     
13.  
    <FrameLayout
14.  
    android:id="@ id/content"
15.  
    android:layout_width="match_parent"
16.  
    android:layout_height="match_parent"
17.  
    android:layout_weight="200"></FrameLayout>
18.  
     
19.  
    <include
20.  
    layout="@layout/bottomlayout"
21.  
    android:layout_width="match_parent"
22.  
    android:layout_height="wrap_content"
23.  
    android:layout_weight="2" />
24.  
     
25.  
    </LinearLayout>

还有要在启动项MainActivity中修改为mainlayout

中间界面切换

创建Fragment(blank)

删除其他方法，只留下onCreateView方法

由于共有四个界面的切换，所以一共要创建4个Fragment,创建后项目结构如下：

然后在MainActivity中将四个Fragment和导航栏中的四个创建联系，使用findViewbyId()对应导航栏中四个部分的id

1.  
   linearLayout1=findViewById(R.id.layout1);
2.  
   linearLayout2=findViewById(R.id.layout2);
3.  
   linearLayout3=findViewById(R.id.layout3);
4.  
   linearLayout4=findViewById(R.id.layout4);

新建init()函数用于Fragment页面初始化

1.  
   public void initial(){
2.  
   transaction=manager.beginTransaction()
3.  
   .add(R.id.content,fragment1)
4.  
   .add(R.id.content,fragment2)
5.  
   .add(R.id.content,fragment3)
6.  
   .add(R.id.content,fragment4)
7.  
   .commit();
8.  
   }

由于每一次点击图标后，页面展现的是隐藏当前的界面，展示点击图标对应的界面

新建showfragment展示界面

1.  
   private void showfragment(Fragment fragment) {
2.  
   transaction=manager.beginTransaction()
3.  
   .show(fragment)
4.  
   .commit();
5.  
   }

新建fragmentHide隐藏界面

1.  
   public void fragmentHide(){
2.  
   transaction=manager.beginTransaction()
3.  
   .hide(fragment1)
4.  
   .hide(fragment2)
5.  
   .hide(fragment3)
6.  
   .hide(fragment4)
7.  
   .commit();
8.  
   }

设置监听程序，完成点击图标时触发事件，并使用switch完成点击不同的图标展现不同的界面

1.  
   public void onClick(View view){
2.  
   fragmentHide();
3.  
   switch (view.getId())
4.  
   {
5.  
   case R.id.layout1:showfragment(fragment1);break;
6.  
   case R.id.layout2:showfragment(fragment2);break;
7.  
   case R.id.layout3:showfragment(fragment3);break;
8.  
   case R.id.layout4:showfragment(fragment4);break;
9.  
   }
10.  
    }

并在主方法中添加如下代码

1.  
   linearLayout1.setOnClickListener(this);
2.  
   linearLayout2.setOnClickListener(this);
3.  
   linearLayout3.setOnClickListener(this);
4.  
   linearLayout4.setOnClickListener(this);

在中间界面即fragment_1,fragment_2,fragment_3,fragment_4中设置每个界面设置不同的内容

最后在打开App的开始界面应该是显示聊天界面，所以在主方法后添加如下代码：

1.  
   initial();
2.  
   fragmentHide();
3.  
   showfragment(fragment1);

还可以修改App的名字，是在value目录中的strings.xml文件中修改

MainActivity.java

1.  
   package com.example.homeworkapplication;
2.  
    
3.  
   import androidx.appcompat.app.AppCompatActivity;
4.  
   import androidx.fragment.app.Fragment;
5.  
   import androidx.fragment.app.FragmentManager;
6.  
    
7.  
   import android.os.Bundle;
8.  
   import android.view.View;
9.  
   import android.widget.LinearLayout;
10.  
     
11.  
    public class MainActivity extends AppCompatActivity implements View.OnClickListener{
12.  
     
13.  
    Fragment fragment1,fragment2,fragment3,fragment4; //声明为父类
14.  
    int transaction;
15.  
    FragmentManager manager;
16.  
     
17.  
    LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
18.  
     
19.  
    int i;
20.  
     
21.  
    @Override
22.  
    protected void onCreate(Bundle savedInstanceState) {
23.  
    super.onCreate(savedInstanceState);
24.  
    setContentView(R.layout.mainlayout);
25.  
     
26.  
    linearLayout1=findViewById(R.id.layout1);
27.  
    linearLayout2=findViewById(R.id.layout2);
28.  
    linearLayout3=findViewById(R.id.layout3);
29.  
    linearLayout4=findViewById(R.id.layout4);
30.  
     
31.  
    manager=getSupportFragmentManager();
32.  
     
33.  
    fragment1=new Fragment1();
34.  
    fragment2=new Fragment2();
35.  
    fragment3=new Fragment3();
36.  
    fragment4=new Fragment4();
37.  
     
38.  
    initial();
39.  
    fragmentHide();
40.  
    showfragment(fragment1);
41.  
     
42.  
    linearLayout1.setOnClickListener(this);
43.  
    linearLayout2.setOnClickListener(this);
44.  
    linearLayout3.setOnClickListener(this);
45.  
    linearLayout4.setOnClickListener(this);
46.  
    }
47.  
     
48.  
    public void initial(){
49.  
    transaction=manager.beginTransaction()
50.  
    .add(R.id.content,fragment1)
51.  
    .add(R.id.content,fragment2)
52.  
    .add(R.id.content,fragment3)
53.  
    .add(R.id.content,fragment4)
54.  
    .commit();
55.  
    }
56.  
     
57.  
    public void onClick(View view){
58.  
    fragmentHide();
59.  
    switch (view.getId())
60.  
    {
61.  
    case R.id.layout1:showfragment(fragment1);break;
62.  
    case R.id.layout2:showfragment(fragment2);break;
63.  
    case R.id.layout3:showfragment(fragment3);break;
64.  
    case R.id.layout4:showfragment(fragment4);break;
65.  
    }
66.  
    }
67.  
     
68.  
    private void showfragment(Fragment fragment) {
69.  
    transaction=manager.beginTransaction()
70.  
    .show(fragment)
71.  
    .commit();
72.  
    }
73.  
     
74.  
    public void fragmentHide(){
75.  
    transaction=manager.beginTransaction()
76.  
    .hide(fragment1)
77.  
    .hide(fragment2)
78.  
    .hide(fragment3)
79.  
    .hide(fragment4)
80.  
    .commit();
81.  
    }
82.  
     
83.  
     
84.  
     
85.  
    }

运行结果

源码开源地址

点击查看源码