【安卓开发】类微信的门户页面框架设计

空自流_

已于 2022-09-30 21:56:43 修改

阅读量805

点赞数 2

文章标签： android

于 2022-09-30 21:03:32 首次发布

本文链接：https://blog.csdn.net/qq_55106707/article/details/127119415

版权

类微信的门户页面框架设计

设计目标

根据课程教学内容完成类微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用fragment，activity，不得使用UNIAPP技术进行开发（H5或者小程序）

功能说明

在这里插入图片描述

门户页面分为top、content、bottom三个部分,通过点击bottom的四个tab可以实现content的转换，同时点击的tab变为深色

代码解析

top.xml

用textview展示主页面的标题–微信，设置内容居中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="微信"
        android:gravity="center"
        android:textSize="30sp"/>
</LinearLayout>

bottom.xml

一个水平LinearLayout嵌套四个垂直LinearLayout，四个垂直LinearLayout比例为1：1：1：1，每个垂直LinearLayout包含显示图片的ImageView和显示文字的TextView，并设置clickable为true、gravity为bottom

<?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="match_parent"
    android:gravity="center"
    android:orientation="horizontal">
    
    <LinearLayout
        android:id="@+id/LinearLayoutWeixinFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="bottom"
        android:clickable="true"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:srcCompat="@drawable/image_wechat" />
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayoutContactFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="bottom"
        android:clickable="true"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            app:srcCompat="@drawable/image_contact" />
        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="联系人"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayoutFindFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="bottom"
        android:clickable="true"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:srcCompat="@drawable/image_find" />
        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textSize="23sp"/>
    </LinearLayout>
    
    <LinearLayout
        android:id="@+id/LinearLayoutMineFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="bottom"
        android:clickable="true"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            app:srcCompat="@drawable/image_mine" />
        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textSize="23sp"/>
    </LinearLayout>
</LinearLayout>

fragment_wechat.xml(fragment_contact\fragment_find\fragment_mine与此类似)

设置TextView的layout_gravity和gravity均为center，layout_gravity是用来控制TextView在父控件FrameLayout中的位置

<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=".WechatFragment">

   
    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="这是微信页面"
        android:textSize="30sp"/>

</FrameLayout>

activity_main.xml

通过include引入top和bottom，FrameLayout用来动态展示具体的Fragment

<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"
    tools:context=".MainActivity">
    <include layout="@layout/top"/>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"/>


    <include layout="@layout/bottom"/>
</androidx.constraintlayout.widget.ConstraintLayout>

WechatFragment类(ContactFragment\FindFragment\MineFragment与此类似)

定义一个继承Fragment的类WechatFragment，重写onCreateView方法，调用inflater.inflate加载fragment_wechat的布局文件

public class WechatFragment extends Fragment {
    public WechatFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_wechat, container, false);
    }
}

MainActivity

在MainActivity主类中实现View.OnClickListener接口

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private View LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
    private FragmentManager fragmentManager;
    private ImageView image1,image2,image3,image4;
    private Fragment wechatFragment = new WechatFragment();
    private Fragment contactFragment = new ContactFragment();
    private Fragment findFragment = new FindFragment();
    private Fragment mineFragment = new MineFragment();

onCreate()，初始化四个LinearLayout并设置监听，初始化四个ImageView，调用initFragment()，showFragment()(参数为0，默认展示第一个tab的页面)

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        LinearLayout1 = findViewById(R.id.LinearLayoutWeixinFragment);
        LinearLayout2 = findViewById(R.id.LinearLayoutContactFragment);
        LinearLayout3 = findViewById(R.id.LinearLayoutFindFragment);
        LinearLayout4 = findViewById(R.id.LinearLayoutMineFragment);
        LinearLayout1.setOnClickListener(this);
        LinearLayout2.setOnClickListener(this);
        LinearLayout3.setOnClickListener(this);
        LinearLayout4.setOnClickListener(this);

        image1=findViewById(R.id.imageView1);
        image2=findViewById(R.id.imageView2);
        image3=findViewById(R.id.imageView3);
        image4=findViewById(R.id.imageView4);
        initFragment();
        showFragment(0);
    }

initFragment(),首先获取一个fragmentManager实例用来管理fragment，通过FragmentTransaction向Activity state中添加所有Fragment，最后调用commit()提交

    private void initFragment(){
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,wechatFragment)
                    .add(R.id.content,contactFragment)
                    .add(R.id.content,findFragment)
                    .add(R.id.content,mineFragment);
        transaction.commit();
    }

hideFragment()用于隐藏所有的Fragment

    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(wechatFragment)
                    .hide(contactFragment)
                    .hide(findFragment)
                    .hide(mineFragment);
    }

showFragment(),通过FragmentManager获取FragmentTransaction，隐藏所有的fragment，根据传入参数i选择显示相应的fragment，并将对应的drawable中的image切换为深色的image

    private void showFragment(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(wechatFragment);
                image1.setImageResource(R.drawable.image_wechat2);
                break;
            case 1:
                transaction.show(contactFragment);
                image2.setImageResource(R.drawable.image_contact2);
                break;
            case 2:
                transaction.show(findFragment);
                image3.setImageResource(R.drawable.image_find2);
                break;
            case 3:
                transaction.show(mineFragment);
                image4.setImageResource(R.drawable.image_mine2);
                break;
            default:
                break;
        }
        transaction.commit();
    }

resetImgs()用于将所有tab的图标置为初始状态白色，实质上是切换了一个image

    private void resetImgs(){
        image1.setImageResource(R.drawable.image_wechat);
        image2.setImageResource(R.drawable.image_contact);
        image3.setImageResource(R.drawable.image_find);
        image4.setImageResource(R.drawable.image_mine);
    }

onClick()，首先将所有tab的图标变换为白色，通过siwtch分支响应点击事件，展示对应的fragment

    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()){
            case R.id.LinearLayoutWeixinFragment:
                showFragment(0);
                break;
            case R.id.LinearLayoutContactFragment:
                showFragment(1);
                break;
            case R.id.LinearLayoutFindFragment:
                showFragment(2);
                break;
            case R.id.LinearLayoutMineFragment:
                showFragment(3);
                break;
            default:
                break;
        }
    }
}