Android开发

Android——类微信界面设计

1.实验内容及界面设计

1.1实验内容

   用AS完成一个类微信界面的UI设计和实现

1.2实验展示

2.代码实现

2.1制作界面顶部的设置

在res.layout包中新建一个top.xml 文件，来编写顶部设计
具体的代码如下

```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="65dp"
    android:gravity="center"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/app_name"
        android:textColor="#ffffff"
        android:textSize="30sp" />
</LinearLayout>

我们可以得出这么一张xml文件

2.2制作界面底部设计

在res.layout包中新建一个bottom.xml 文件，来编写底部设计
这个部分相对复杂，是由多个linearLayout组合而成
具体代码如下

<?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:id="@+id/LinearLayout"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:baselineAligned="false">

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

        <ImageButton
            android:id="@+id/weixin_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="微信"
            android:textColor="#ffffff"
            android:clickable="false"
            android:textSize="15sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/frd_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="朋友"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/contact_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_address_normal" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="通讯录"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/setting_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:contentDescription="@string/app_name"
            android:clickable="false"
            app:srcCompat="@drawable/tab_settings_normal" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="设置"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>
</LinearLayout>

2.3编写activity-main.xml文件

使用将底部和顶部的代码接入main文件中

<?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"
    android:orientation="vertical">

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

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

    </FrameLayout>

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

</LinearLayout>

2.4使用java语言对页面互动进行设置

需要创建4个FrameLayout(因为我们有四个栏目，每个页面对应一个内容）

将每个FrameLayout连接到其所生成的xml文件，编写xml文件对需要展示的页面进行设置
以微信页面为例，

其所对应的xml文件如下

<?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=".WeixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:id="@+id/textView10"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:text="这是微信聊天页面"
        android:textSize="25dp"
        android:textStyle="bold"/>

</FrameLayout>

接着完成其余三个页面的设置
用java语言将用户互动写入main文件中
具体代码如下

package com.example.wechat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.view.Window;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Fragment mTab01 = new WeixinFragment();
    private Fragment mTab02 = new FriendFragment();
    private Fragment mTab03 = new ContactFragment();
    private Fragment mTab04 = new SettingFragment();

    private FragmentManager fm;

    private LinearLayout mTabWeiXin;
    private LinearLayout mTabFriend;
    private LinearLayout mTabContact;
    private LinearLayout mTabSetting;

    private ImageButton mImgWeiXin;
    private ImageButton mImgFriend;
    private ImageButton mImgContact;
    private ImageButton mImgSetting;


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

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

    private void initFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.content,mTab01);
        transaction.add(R.id.content,mTab02);
        transaction.add(R.id.content,mTab03);
        transaction.add(R.id.content,mTab04);
        transaction.commit();
    }

    private void initEvent(){
        mTabWeiXin.setOnClickListener(this);
        mTabFriend.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView(){
        mTabWeiXin = (LinearLayout)findViewById(R.id.tab_weixin);
        mTabFriend = (LinearLayout)findViewById(R.id.tab_friend);
        mTabContact = (LinearLayout)findViewById(R.id.tab_contact);
        mTabSetting = (LinearLayout)findViewById(R.id.tab_setting);

        mImgWeiXin = (ImageButton)findViewById(R.id.weixin_img);
        mImgFriend = (ImageButton)findViewById(R.id.frd_img);
        mImgContact = (ImageButton)findViewById(R.id.contact_img);
        mImgSetting = (ImageButton)findViewById(R.id.setting_img);
    }

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

    private void SelectFragment(int i){
        FragmentTransaction transaction= fm.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();
    }

    @Override
    public void onClick(View v) {
        ResetImg();
        switch (v.getId()){
            case R.id.tab_weixin:
                SelectFragment(0);
                break;
            case R.id.tab_friend:
                SelectFragment(1);
                break;
            case R.id.tab_contact:
                SelectFragment(2);
                break;
            case R.id.tab_setting:
                SelectFragment(3);
                break;
            default:
                break;
        }
    }

    public 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);

    }
}

记得一定要写下监听器的定义，否则无法进行监听和互动

3.源码仓库

码云仓库地址