AS实验一：仿微信界面

最新推荐文章于 2022-09-29 23:53:31 发布

weixin_44743700

最新推荐文章于 2022-09-29 23:53:31 发布

阅读量360

点赞数 1

本文链接：https://blog.csdn.net/weixin_44743700/article/details/115449573

版权

本文介绍了一个Android实验项目，通过XML布局文件设计了仿微信的顶部和底部界面，包括顶部的WeChat标题和底部的微信、朋友、通讯录、设置四个功能按钮。每个按钮对应一个Fragment，通过点击按钮切换显示不同的Fragment页面，并实现了点击按钮时改变选中状态的视觉效果。实验结果成功展示了仿微信界面的实现。

摘要由CSDN通过智能技术生成

AS实验一：仿微信界面

第一步：设计layout，完成前端设计
先设计top部分

<?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="WeChat"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</LinearLayout>

再设计buttom部分

<?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="60dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal"
    android:gravity="center"
    android:baselineAligned="false">

    <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/weixin_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_weixin_normal" />

        <TextView
            android:id="@+id/微信"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:text="微信"
            android:textColor="#ffffff"
            android:textSize="15dp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/朋友"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:text="朋友"
            android:textColor="#ffffff"
            android:textSize="15dp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/通讯录"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:text="通讯录"
            android:textColor="#ffffff"
            android:textSize="15dp" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/设置"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:text="设置"
            android:textColor="#ffffff"
            android:textSize="15dp" />
    </LinearLayout>
</LinearLayout>

最后把top部分和buttom部分合起来放到mainactivity中，再进行调整，达到满意效果

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

<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的代码，实现四个控件
要求点击下方四个按钮可以切换不同的页面，涉及到fragment的应用
下面附上部分代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment mtab01 = new weixin_Fragment();
    private Fragment mtab02 = new friend_Fragment();
    private Fragment mtab03 = new txl_Fragment();
    private Fragment mtab04 = new setting_Fragment();
    private FragmentManager fm;
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabContact;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgContact;
    private ImageButton mImgSettings;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        ActionBar action_bar=getSupportActionBar();
        if(action_bar!=null)
            action_bar.hide();/*隐藏activity头*/
        setContentView(R.layout.activitymain);
        initFragment();
        initview();
        setselect(0);
        initEvent();
    }
    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 initview(){
        mTabWeixin=(LinearLayout)findViewById(R.id.id_tab_weixin);
        mTabFrd=(LinearLayout)findViewById(R.id.id_tab_frd);
        mTabContact=(LinearLayout)findViewById(R.id.id_tab_txl);
        mTabSettings=(LinearLayout)findViewById(R.id.id_tab_setting);

        mImgWeixin=(ImageButton)findViewById(R.id.weixin_img);
        mImgFrd=(ImageButton)findViewById(R.id.frd_img);
        mImgContact=(ImageButton)findViewById(R.id.txl_img);
        mImgSettings=(ImageButton)findViewById(R.id.settong_img);
    }
    private void setselect(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);
                mImgSettings.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 view) {
        resetImgs();
        switch(view.getId())
        {
            case R.id.id_tab_weixin:
                setselect(0);
                break;
            case R.id.weixin_img:
                setselect(0);
                break;
            case R.id.id_tab_frd:
                setselect(1);
                break;
            case R.id.frd_img:
                setselect(1);
                break;
            case R.id.id_tab_txl:
                setselect(2);
                break;
            case R.id.txl_img:
                setselect(2);
                break;
            case R.id.id_tab_setting:
                setselect(3);
                break;
            case R.id.settong_img:
                setselect(3);
                break;
            default:
                break;
        }
    }
    private void resetImgs(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContact.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
        mImgWeixin.setOnClickListener(this);
        mImgFrd.setOnClickListener(this);
        mImgContact.setOnClickListener(this);
        mImgSettings.setOnClickListener(this);
    }
}