类微信界面设计

项目总体要求

1.APP设计界面类似于微信界面
2.实现四个Tab切换效果

---

一、页面布局

1.顶部布局文件

顶部显示APP标题

<?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/textView0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:textColor="@color/white"
        android:textSize="30sp"
        android:gravity="center"
        android:text="微信" />
</LinearLayout>

2.底部布局文件

底部为四个横向排布的 LinearLayout

<LinearLayout
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/wxImage"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:clickable="false"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/white"
            android:text="微信" />
    </LinearLayout>

3.主界面布局

将顶部布局文件和底部布局文件引入主界面中，中间FrameLayout用于显示不同Fragment

 <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

二、核心代码

1.新建Fragment文件

1）在MainActivity.java同目录下新建四个Fragment文件

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

2）设置Fragment布局
在对应生成的Fragment布局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=".friendFragement">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="这是好友界面" />

</FrameLayout>

2.编写主函数

新建四个Fragment对象用于关联对应的文件

	Fragment mTab1 = new wxFragment();
    Fragment mTab2 = new friendFragement();
    Fragment mTab3 = new bookFragment();
    Fragment mTab4 = new settingsFragment();

1）InitView()用于关联对象

private void initView() {
        message = findViewById(R.id.message);
        friend = findViewById(R.id.friend);
        book = findViewById(R.id.book);
        settings = findViewById(R.id.settings);

        wxImage = findViewById(R.id.wxImage);
        friendImage = findViewById(R.id.friendImage);
        bookImage = findViewById(R.id.bookImage);
        settingsImage = findViewById(R.id.settingsImage);
    }

2）initEvent()用于设置监听器

private void initEvent() {
        message.setOnClickListener(this);
        friend.setOnClickListener(this);
        book.setOnClickListener(this);
        settings.setOnClickListener(this);
    }

3）initFragment()添加界面

private void initFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.content, mTab1);
        transaction.add(R.id.content, mTab2);
        transaction.add(R.id.content, mTab3);
        transaction.add(R.id.content, mTab4);
        transaction.commit();
    }

4）selectTab()选择展示界面

private void selectTab(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction); //隐藏全部界面
        switch (i){
            case 1:
                transaction.show(mTab1);
                wxImage.setImageResource(R.drawable.tab_weixin_pressed);
                break;  //其余代码类似   
        }
        transaction.commit();
    }

5）重写onclick()方法用于处理点击事件

@Override
    public void onClick(View v) {
        resetImg(); //还原图标

        switch (v.getId()){
            case R.id.message:
                selectTab(1);
                break; //其余代码类似             
    }

最后在主函数中调用以上编写的函数

	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);

        initView(); //关联对象
        initEvent(); //设置监听器
        initFragment(); //添加界面
        selectTab(1);
    }

三、界面展示

---

点击此处查看完整代码