AndroidStudio搭建类微信界面

安卓微信界面设计

一、微信主界面

1）将底部、顶部、中间部分分开设计

2）底部采用LinearLayout（horizontal）嵌套LinearLayout（vertical），设置Layout_width为0dp，Layout_weight为1使得四个控件能够平铺填满界面。引用导入的微信图标放在drawable文件中，设置android:scaleType="fitXY"将图片保持在中心。

<?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:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/cardview_dark_background"
    android:baselineAligned="false"
    android:orientation="horizontal">

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

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/cardview_dark_background"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/dialogue" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="微信"
            android:textColor="#e6e6e6"
            android:textSize="24sp" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/cardview_dark_background"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/friend" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="朋友"
            android:textColor="#e6e6e6"
            android:textSize="24sp" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/cardview_dark_background"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/mail" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="通讯录"
            android:textColor="#e6e6e6"
            android:textSize="24sp" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@color/cardview_dark_background"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitXY"
            android:src="@drawable/setup" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="设置"
            android:textColor="#e6e6e6"
            android:textSize="24sp" />
    </LinearLayout>

</LinearLayout>

 

底部栏界面：

3）顶部代码文件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="55dp"
    android:background="@color/cardview_dark_background">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我的微信"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="@color/cardview_light_background"
        android:textSize="40dp" />
</LinearLayout>

顶部效果展示：

 

 4）整体界面

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/top"/>

    <FrameLayout

        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="45sp"
            android:text=" " />
    </FrameLayout>

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

整体效果展示：

5）为了实现四个界面的切换，选择使用Fragment类：将四个布局文件压缩分别到fragment类里，成为类的实例对象，将页面对象化。完成的页面的视图层，就要开始完成逻辑层。对于页面切换，就是监听图片按钮，触发事件。

　　5.1 切换页面
　　切换页面可以使用FragmentTransaction,并且在initFragment()函数中使用add()方法将四个切换页面添加到FrameLayout中，然后通过show()就可以展示对　　　　应的页面，而hide()可以隐藏相应的页面。所以这里可以想到，在show之前调用hide隐藏所有被add的页面，就可以达到切换页面的效果。

　　5.2 绑定事件
　　实现View.OnClickListener接口，implements View.OnClickListener，然后调用实现的方法initEvent()，再对相应的组件使用setOnClickListener()方法进行监听点击事件。

　　5.3 定义事件
　　对组件绑定好事件后，就得定义触发后会执行的事件onClick(View v)。这里想达到点击后切换页面，点击图标变亮，并且其他图标变灰的效果。
　　大致思路为：点击后，会从v传入对应的组件，先获取组件的id，知道是哪个按钮，然后将所有图片变灰，再判断传入的id，切换到这个按钮对应的页面，并将这个页面的按钮变亮。

public class MainActivity extends Activity implements View.OnClickListener {

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

    private FragmentManager fm;


    LinearLayout mTabWeixin;
    LinearLayout mTabFrd;
    LinearLayout mTabContact;
    LinearLayout mTabSetting;

    ImageButton mImgWeixin;
    ImageButton mImgFrd;
    ImageButton mImgContact;
    ImageButton mImgSetting;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉窗口标题
        setContentView(R.layout.activity_main);
        initView();
        initFragment();
        initEvent();
        selectFragment(0);
    }


    private void initView() {
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabContact = (LinearLayout) findViewById(R.id.id_tab_contact);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgContact = (ImageButton) findViewById(R.id.id_tab_contact_img);
        mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img);
    }

    private void initFragment() {
        fm = getFragmentManager();
        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();
    }

    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    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);
                mImgFrd.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();
    }
    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }

    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                selectFragment(0);
                break;
            case R.id.id_tab_frd:
                selectFragment(1);
                break;
            case R.id.id_tab_contact:
                selectFragment(2);
                break;
            case R.id.id_tab_setting:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    public void resetImgs() {
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContact.setImageResource(R.drawable.tab_address_normal);
        mImgSetting.setImageResource(R.drawable.tab_settings_normal);
    }
}

切换效果：

 

 6）代码仓库：app · 天东有木/DA - 码云 - 开源中国 (gitee.com)