目录
4.四个页面 weixin.xml、tongxunlu.xml、faxian.xml、wo.xml
5.核心功能实现 Manactivity.java、Fragemnt_weixin.java等
一、设计目标
? ? ? ? 完成类微信门户页面框架设计，APP最少包含4个Tab页面(微信、通讯录、发现、我)。框架设计需要使用fragment、activity。
二、功能说明
? ? ? ? 共四个页面，可通过点击界面底部对应控件进行切换，当前所处页面对应图案会处于点亮状态，其余页面对应图案为灰色。
三、代码解析
1.项目整体结构
?
2.底部控件 button_layout.xml
????????底部控件最外层为一个horizontal的LinearLayout控件，其内包含四个vertical的LinearLayout控件，内层的LinearLayout分别包含一个ImageView控件和一个TextView控件，分别用于存储每个页面对应的图案和文字。
<?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:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_weixin"
android:layout_width="match_parent"
android:layout_height="64dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
app:srcCompat="@drawable/weixin" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_tongxunlu"
android:layout_width="match_parent"
android:layout_height="65dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
app:srcCompat="@drawable/tongxunlu" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_faxian"
android:layout_width="match_parent"
android:layout_height="64dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
app:srcCompat="@drawable/faxian" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="发现"
android:textSize="20dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_wo"
android:layout_width="match_parent"
android:layout_height="64dp"
android:contentDescription="@string/app_name"
android:scaleType="centerInside"
app:srcCompat="@drawable/wo" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我"
android:textSize="20dp" />
</LinearLayout>
</LinearLayout>3.顶部控件 titlebar.xml
????????此部分仅用于展示界面顶部微信二字。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#e5e5e5"
android:gravity="top">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="微信"
android:textSize="30dp" />
</LinearLayout>4.四个页面 weixin.xml、tongxunlu.xml、faxian.xml、wo.xml
? ? ? ? 此部分代码高度重合，此处只展示weixin.xml。此次作业未设计页面具体内容，只包含一个TextView控件。
<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信界面"
android:textSize="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>5.核心功能实现Manactivity.java、Fragemnt_weixin.java等
Manactivity.java? ? ? ??
核心函数:? ? Frags_init、Frags_hide、Frags_show、reFresh、onClick
Frags_init:创建一个transaction并向Activity state中添加四个Fragment，并与最外层容器Frame_all绑定。
Frags_hide:通过传递进来的参数，对指定Fragment进行隐藏
Frags_show:通过findViewById返回对应的View,并进行强制类型转换，先隐藏所有Fragment，通过传入参数决定对对应页面进行Frags_show，将ImageButton中的图片替换成亮色。
reFresh:将所有亮色图片替换回灰色
onClick:对四个LinearLayout进行点击监听，通过getid()所点击LinearLayout的id，并将其对应的页面show()
public class MainActivity extends AppCompatActivity {
private Fragment weixinFragment=new Fragment_weixin();
private Fragment tongxunluFragment=new Fragment_tongxunlu();
private Fragment faxianFragment=new Fragment_faxian();
private Fragment woFragment=new Fragment_wo();
private FragmentManager manager;
private ImageButton weixinbutton;
private ImageButton tongxunlubutton;
private ImageButton faxianbutton;
private ImageButton wobutton;
private LinearLayout Linearlayout1,Linearlayout2,Linearlayout3,Linearlayout4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Linearlayout1=findViewById(R.id.LinearLayout1);
Linearlayout2=findViewById(R.id.LinearLayout2);
Linearlayout3=findViewById(R.id.LinearLayout3);
Linearlayout4=findViewById(R.id.LinearLayout4);
Linearlayout1.setOnClickListener(this::onClick);
Linearlayout2.setOnClickListener(this::onClick);
Linearlayout3.setOnClickListener(this::onClick);
Linearlayout4.setOnClickListener(this::onClick);
weixinbutton= (ImageButton) findViewById(R.id.img_weixin);
tongxunlubutton= (ImageButton) findViewById(R.id.img_tongxunlu);
faxianbutton= (ImageButton) findViewById(R.id.img_faxian);
wobutton= (ImageButton) findViewById(R.id.img_wo);
Frags_init();
Frags_show(0);
}
private void Frags_init()
{
manager=getSupportFragmentManager();
FragmentTransaction transaction= manager.beginTransaction();
transaction.add(R.id.id_content,weixinFragment);
transaction.add(R.id.id_content,tongxunluFragment);
transaction.add(R.id.id_content,faxianFragment);
transaction.add(R.id.id_content,woFragment);
transaction.commit();
}
private void Frags_hide(FragmentTransaction transaction)
{
transaction.hide(weixinFragment);
transaction.hide(tongxunluFragment);
transaction.hide(faxianFragment);
transaction.hide(woFragment);
}
private void Frags_show(int i)
{
FragmentTransaction transaction=manager.beginTransaction();
Frags_hide(transaction);
switch(i){
case 0:
Log.d("Show Fragment","1");
transaction.show(weixinFragment);
weixinbutton.setImageResource(R.drawable.weixin_b);
break;
case 1:
transaction.show(tongxunluFragment);
tongxunlubutton.setImageResource(R.drawable.tongxunlu_b);
break;
case 2:
transaction.show(faxianFragment);
faxianbutton.setImageResource(R.drawable.faxian_b);
break;
case 3:
transaction.show(woFragment);
wobutton.setImageResource(R.drawable.wo_b);
break;
default:
break;
}
transaction.commit();
}
public void onClick(View v){
Log.d("onClick","1");
reFresh();
switch(v.getId()){
case R.id.LinearLayout1:
Frags_show(0);
break;
case R.id.LinearLayout2:
Frags_show(1);
break;
case R.id.LinearLayout3:
Frags_show(2);
break;
case R.id.LinearLayout4:
Frags_show(3);
break;
default:
break;
}
}
public void reFresh(){
weixinbutton.setImageResource(R.drawable.weixin);
tongxunlubutton.setImageResource(R.drawable.tongxunlu);
faxianbutton.setImageResource(R.drawable.faxian);
wobutton.setImageResource(R.drawable.wo);
}
} Fragemnt_weixin.java（剩余三个界面类似）
????????在为当前Fragment创建视图时调用onCreateBiew,其中参数包含了布局文件（weixin.xml）,和当前Fragment所在的容器。
package com.example.homework;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class Fragment_weixin extends Fragment{
public Fragment_weixin() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.weixin, container, false);
}
}
四、运行展示截图
?
