Utilice AndroidStudio para implementar la interfaz de la página de inicio de WeChat

@ [TOC] Utilice AndroidStudio para implementar la interfaz de la página de inicio de WeChat

Utilice AndroidStudio para implementar la interfaz de la página de inicio de WeChat

Análisis detallado e introducción del proceso de AS que implementa la página de inicio de WeChat con código fuente

Análisis de interfaz

Analicemos la página de inicio de WeChat y veamos cuántos archivos .xml
son necesarios : como se muestra en la figura, necesitamos un total de 7 archivos .xml.




Entre ellos, también necesitamos una interfaz que combine las seis interfaces restantes, a las que se refiere el número de serie 4.

Implementación de interfaz estática (.xml)

1. top.xml
   

2. bottom.xml
   
   

3. tab01.xml
   

4. El
   
   código clave de 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>

Implementación dinámica de interfaz

Estructura del directorio

El fragmento se usa principalmente aquí

Las ventajas de Fragment son las siguientes:
Modularidad: no tenemos que escribir todo el código en la Actividad, sino escribir el código en el Fragment respectivo.
Reutilización: múltiples actividades pueden reutilizar un Fragmento.
Adaptabilidad: de acuerdo con el tamaño de la pantalla y la orientación de la pantalla del hardware, se pueden realizar fácilmente diferentes diseños, para que la experiencia del usuario sea mejor.
Autor: JYGod Dian
enlace: https: //www.jianshu.com/p/11c8ced79193

El siguiente paso es inicializar la interfaz e iniciar el evento.
Analice el efecto de la interfaz, por ejemplo, cuando hace clic en una tecla de navegación, salta a la página principal de la interfaz y, al mismo tiempo, excepto la tecla de navegación, las teclas de navegación restantes se oscurecen

# códigos clave

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);

    }
}

Descarga del código fuente

Dirección de descarga de CSDN
https://download.csdn.net/download/bdwdwks/12251344
dirección de descarga de la nube de código
https://gitee.com/moshangxveran/wechat_homepage.git