Use AndroidStudio to implement WeChat homepage interface

@ [TOC] Use AndroidStudio to implement WeChat homepage interface

Use AndroidStudio to implement WeChat homepage interface

Detailed analysis and introduction of the process of AS implementing WeChat homepage with source code

Interface analysis

Let's do an analysis on the WeChat homepage and see how many .xml files
are needed : As shown in the figure, we need a total of 7 .xml files




Among them, we also need an interface that combines the remaining six interfaces, which is referred to by the serial number 4.

Static interface implementation (.xml)

1. top.xml
   

2. bottom.xml
   
   

3. tab01.xml
   

4. The
   
   key code of activity_main.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="match_parent"
    android:orientation="vertical">

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

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


    </FrameLayout>

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

Interface dynamic implementation

Directory Structure

Fragment is mainly used here

The advantages of Fragment are the following:
Modularity: We do not have to write all the code in the Activity, but write the code in the respective Fragment.
Reusability: Multiple Activities can reuse a Fragment.
Adaptability: According to the screen size and screen orientation of the hardware, different layouts can be easily realized, so that the user experience is better.
Author: JYGod Dian
link: https: //www.jianshu.com/p/11c8ced79193

The next step is to initialize the interface and start the event
Analyze the effect of the interface, for example, when you click a navigation key, jump to the main page of the interface, and at the same time except the navigation key, the remaining navigation keys become dark

# Key codes

public class MainActivity extends Activity implements View.OnClickListener {
//    weixinFragment mTab01;
//    frdFragment mTab02;
//    contactsFragment mTab03;
//    settingsFragment mTab04;
    private LinearLayout mTabWeiXin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabContacts;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeiXin;
    private ImageButton mImgFrd;
    private ImageButton mImgContacts;
    private ImageButton mImgSettings;

    private Fragment mTab01=new weixinFragment();
    private Fragment mTab02=new frdFragment();
    private Fragment mTab03=new contactsFragment();
    private Fragment mTab04=new settingsFragment();

    private FragmentManager fm;

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

        initView();
        initFragment();
        initEvent();
        setSelect(0);  //初始值设置为0，默认weixinFragment为首页


    }

    /**
     * 事件启动函数
     * 全屏监听太耗内存
     * 限制只监听4个LinearLayout
     */
    private void initEvent(){
        mTabWeiXin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContacts.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);

    }

    private void initFragment(){
//        mTab01=new weixinFragment();
//        mTab02=new frdFragment();
//        mTab03=new contactsFragment();
//        mTab04=new settingsFragment();
        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_WeChat);
        mTabFrd=(LinearLayout)findViewById(R.id.id_tab_Frd);
        mTabContacts=(LinearLayout)findViewById(R.id.id_tab_Contacts);
        mTabSettings=(LinearLayout)findViewById(R.id.id_tab_Settings);

        mImgWeiXin=(ImageButton)findViewById(R.id.img_WeChat);
        mImgFrd=(ImageButton)findViewById(R.id.img_Frd);
        mImgContacts=(ImageButton)findViewById(R.id.img_Contacts);
        mImgSettings=(ImageButton)findViewById(R.id.img_Settings);

    }

    private void setSelect(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                Log.d("setSelect","1");
                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);
                mImgContacts.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:break;
        }
        transaction.commit();
    }


    /**
     * 将4个fragment先全部隐藏
     */
    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);

    }

    public void onClick(View v){
        Log.d("onClick","2");
        resetImgs();
        switch (v.getId()){
            case R.id.id_tab_WeChat:
                setSelect(0);
                break;
            case R.id.id_tab_Frd:
                setSelect(1);
                break;
            case R.id.id_tab_Contacts:
                setSelect(2);
                break;
            case R.id.id_tab_Settings:
                setSelect(3);
                break;
             default:
                 break;
        }

    }

    /**
     * 切换图片至暗色
     */
    public void resetImgs(){
        mImgWeiXin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContacts.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);

    }
}

Source code download

CSDN download address
https://download.csdn.net/download/bdwdwks/12251344code
cloud download address
https://gitee.com/moshangxveran/wechat_homepage.git