Andriod Studio编写简单仿微信界面

Andriod Studio编写简单仿微信界面

---

项目总体要求

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

---

一、页面布局

页面主要分为顶部（top.xml），底部(bottom,xml)和主页面布局(layout_main.xml)

1.顶部布局

代码如下（示例）：

<?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="85dp"
    android:layout_gravity="center_horizontal"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView2"
        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>

2.底部布局

以下是一个微信的布局再copy三个就OK了：

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

        <ImageButton
            android:id="@+id/id_tab_weixin_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_weixin_pressed" />

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

---

3.主页面布局

主页面主要是include顶部和底部页面（示例）：

<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" />

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

    </FrameLayout>

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

---

二、建立Fragment文件

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

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

2.对fragment进行设计

本次实验主要在每个fragment中显示按钮所显示的版块添加一个textview）：

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/hello_blank_fragment"
        android:textSize="25sp"
        android:textStyle="bold"
       />

---

三、编写功能代码

1.initview方法用于关联对象

private void initView(){
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd =(LinearLayout) findViewById(R.id.id_tab_friend);
        mTabcontact =(LinearLayout) findViewById(R.id.id_tab_contact);
        mTabsetting =(LinearLayout) findViewById(R.id.id_tab_setting);

        imageWeixin =(ImageButton) findViewById(R.id.id_tab_weixin_img);
        imageFrd =(ImageButton) findViewById(R.id.id_tab_friend_img);
        imagecontact =(ImageButton) findViewById(R.id.id_tab_contact_img);
        imagesetting =(ImageButton) findViewById(R.id.id_tab_setting_img);
    }

2.setSelect方法选择展示界面

private void setSelect(int i){
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                Log.d("setSelect","1");
                transaction.show(mTab01);
                imageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                imageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                imagecontact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                imagesetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();

    }

3.initFragment方法用于添加页面

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

4.initEvent方法用于设置监听器

    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabcontact.setOnClickListener(this);
        mTabsetting.setOnClickListener(this);
    }
    

四、运行界面展示

点击查看完整代码