移动开发作业一：类微信界面设计

移动开发作业一：类微信界面设计

一、功能介绍

类似微信的初始化页面，顶部显示微信。界面下有四个按钮，分别是消息、好友、通讯录、设置。点击不同按钮，中间显示界面显示对应的内容。

二、分析实现方法

2.1 UI布局设计

1.顶部top.xml

<?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="64dp"
    android:gravity="center"
    android:orientation="vertical"
    android:background="@color/black">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:gravity="center_horizontal"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="30sp" />
</LinearLayout>

2.底部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:layout_height="75dp"
    android:background="@color/black"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/id_tab_news"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_news_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="聊天"
            android:textColor="@color/white"
            android:textSize="17sp" />
    </LinearLayout>
</LinearLayout>

3.activity_main_xml
主要工作就是将写好的top.xml和button.xml整合起来

<?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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <include layout="@layout/top"/>
        
        <FrameLayout
            android:id="@+id/id_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

        </FrameLayout>

    <include layout="@layout/button"/>

    </LinearLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

4.页面中部分采用Fragment实现，Fragment可以在一个 Activity 中组合多个片段，从而构建多窗格界面。

创建4个FrameLayout

以其中一个weixinFragment为例，其中只保留以下方法

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

2.2 MainActivity配置

声明所需变量

private LinearLayout mTabweixin;
    private LinearLayout mTabfriend;
    private LinearLayout mTabcontact;
    private LinearLayout mTabsetting;

    private ImageButton mImgweixin;
    private ImageButton mImgfriend;
    private ImageButton mImgcontact;
    private ImageButton mImgsetting;

    private final Fragment mTab01=new weixinFragment();
    private final Fragment mTab02=new friendFragment();
    private final Fragment mTab03=new contactFragment();
    private final Fragment mTab04=new settingFragment();

    private FragmentManager fragmentManager;

初始化LinearLayout和ImageView

private void initView(){
        mTabweixin=findViewById(R.id.id_tab_news);
        mTabfriend=findViewById(R.id.id_tab_friend);
        mTabcontact=findViewById(R.id.id_tab_address);
        mTabsetting=findViewById(R.id.id_tab_setting);

        mImgweixin=findViewById(R.id.id_tab_news_img);
        mImgfriend=findViewById(R.id.id_tab_friend_img);
        mImgcontact=findViewById(R.id.id_tab_address_img);
        mImgsetting=findViewById(R.id.id_tab_setting_img);
    }

设置底部按钮点击事件

@Override
    public void onClick(View v) {
        resetimg();
        switch(v.getId()){
            case R.id.id_tab_news:
                selectFragment(0);
                break;
            case R.id.id_tab_friend:
                selectFragment(1);
                break;
            case R.id.id_tab_address:
                selectFragment(2);
                break;
            case R.id.id_tab_setting:
                selectFragment(3);
                break;
            default:
                break;
    }
}

控制监听范围

private void initEvent(){
        mTabweixin.setOnClickListener(this);
        mTabfriend.setOnClickListener(this);
        mTabcontact.setOnClickListener(this);
        mTabsetting.setOnClickListener(this);
    }

选择所显示的Fragment

private void selectFragment(int i){
        FragmentTransaction transaction =fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgweixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgfriend.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgcontact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

隐藏Fragment

private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

图标变灰

private void resetimg() {
        mImgweixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgfriend.setImageResource(R.drawable.tab_find_frd_normal);
        mImgcontact.setImageResource(R.drawable.tab_address_normal);
        mImgsetting.setImageResource(R.drawable.tab_settings_normal);
    }

OnCreate执行以上所写的函数
创建MainActivity，即执行OnCreate函数时执行初始化、监听等函数

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

        initView();
        initEvent();
        initFragment();
        selectFragment(0);
    }

三、运行界面展示

四、源码代码仓库

链接: 我的代码仓库.