仿微信底部导航栏

文件分支结构：

最终效果：

1.资源文件：

tab_menu_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape>
            <solid android:color="#dfdcdc"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/transparent" />
        </shape>
    </item>
</selector>

tab_menu_deal.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_menu_deal_on" android:state_checked="true"/>
    <item android:drawable="@mipmap/ic_menu_deal_off"/>
</selector>

tab_menu_deal_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/text_blue" android:state_selected="true"/>
    <item android:color="@color/text_gray" />
</selector>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>

    <color name="transparent">#f5f2f4</color>
    <color name="text_gray">#898888</color>
    <color name="text_blue">#5c9ad7</color>


</resources>

布局文件：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/transparent">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="信息"
            android:textColor="@color/text_gray"
            android:textSize="18sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_alignParentBottom="true"
            android:background="@color/text_gray" />

    </RelativeLayout>

    <RadioGroup
        android:id="@+id/rd_group"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_alignParentBottom="true"
        android:background="@color/transparent"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rd_menu_deal"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_deal"
            android:text="微信"/>

        <RadioButton
            android:id="@+id/rd_menu_poi"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_deal"
            android:text="通讯录"/>

        <RadioButton
            android:id="@+id/rd_menu_more"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_deal"
            android:text="发现"/>

        <RadioButton
            android:id="@+id/rd_menu_user"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_deal"
            android:text="我"/>
    </RadioGroup>

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/rd_group"
        android:layout_below="@id/ly_top_bar"
        android:background="@color/transparent">
    </FrameLayout>
</RelativeLayout>

MainActivity.java

package com.example.a73435.wei_xin_interface;

import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends AppCompatActivity  implements RadioGroup.OnCheckedChangeListener{

    private RadioGroup rpTab;
    private RadioButton rbDeal,rbPoi,rbMore,rbUser;
    private MyFragment fg1;
    private OtherFragment fg2,fg3,fg4;

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

        bindView();
    }

    private void bindView() {
        rpTab = (RadioGroup)findViewById(R.id.rd_group);
        rpTab.setOnCheckedChangeListener(this);

        rbDeal = (RadioButton)findViewById(R.id.rd_menu_deal);
        rbPoi = (RadioButton)findViewById(R.id.rd_menu_poi);
        rbMore = (RadioButton)findViewById(R.id.rd_menu_more);
        rbUser = (RadioButton)findViewById(R.id.rd_menu_user);

        rbDeal.setChecked(true);
    }

    public void hideAllFragment(FragmentTransaction transaction){
        if(fg1!=null){
            transaction.hide(fg1);
        }
        if(fg2!=null){
            transaction.hide(fg2);
        }
        if(fg3!=null){
            transaction.hide(fg3);
        }
        if(fg4!=null){
            transaction.hide(fg4);
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        //FragmentManager要管理fragment（添加，替换以及其他的执行动作）
        //的一系列的事务变化，需要通过fragmentTransaction来操作执行
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        hideAllFragment(transaction);
        switch (checkedId){
            case R.id.rd_menu_deal:

                if(fg1==null){
                    fg1 = new MyFragment();
                    transaction.add(R.id.fragment_container,fg1);
                }else{
                    transaction.show(fg1);
                }
                break;
            case R.id.rd_menu_poi:
                if(fg2==null){
                    fg2 = new OtherFragment("第二个Fragment");
                    transaction.add(R.id.fragment_container,fg2);
                }else{
                    transaction.show(fg2);
                }
                break;
            case R.id.rd_menu_more:
                if(fg3==null){
                    fg3 = new OtherFragment("第三个Fragment");
                    transaction.add(R.id.fragment_container,fg3);
                }else{
                    transaction.show(fg3);
                }
                break;
            case R.id.rd_menu_user:
                if(fg4==null){
                    fg4 = new OtherFragment("第四个Fragment");
                    transaction.add(R.id.fragment_container,fg4);
                }else{
                    transaction.show(fg4);
                }
                break;
        }
        transaction.commit();
    }
}

现在创建第一个fragment，使用simpleAdapter创建一个好友列表：

界面布局文件：

my_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- 定义一个ListView -->
    <ListView android:id="@+id/mylist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

simple_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- 定义一个ImageView，用于作为列表项的一部分。 -->
    <ImageView android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"/>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- 定义一个TextView，用于作为列表项的一部分。 -->
        <TextView android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:textColor="#f0f"
            android:paddingLeft="10dp"/>
        <!-- 定义一个TextView，用于作为列表项的一部分。 -->
        <TextView android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dp"
            android:paddingLeft="10dp"/>
    </LinearLayout>
</LinearLayout>

MyFragment.java

package com.example.a73435.wei_xin_interface;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MyFragment extends Fragment {
    private String[] names = new String[]
            { "虎头", "弄玉", "李清照", "李白"};
    private String[] descs = new String[]
            { "可爱的小孩", "一个擅长音乐的女孩"
                    , "一个擅长文学的女性", "浪漫主义诗人"};
    private int[] imageIds = new int[]
            { R.drawable.tiger , R.drawable.nongyu
                    , R.drawable.qingzhao , R.drawable.libai};

    private View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
    {
        view=inflater.inflate(R.layout.my_fragment,container,false);
        // 创建一个List集合，List集合的元素是Map
        List<Map<String, Object>> listItems =
                new ArrayList<Map<String, Object>>();
        for (int i = 0; i < names.length; i++)
        {
            Map<String, Object> listItem = new HashMap<String, Object>();
            listItem.put("header", imageIds[i]);
            listItem.put("personName", names[i]);
            listItem.put("desc", descs[i]);
            listItems.add(listItem);
        }
        // 创建一个SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(getActivity(), listItems,
                R.layout.simple_item,
                new String[] { "personName", "header" , "desc"},
                new int[] { R.id.name, R.id.header , R.id.desc });
        ListView list = (ListView)view.findViewById(R.id.mylist);
        // 为ListView设置Adapter
        list.setAdapter(simpleAdapter);
        return view;
    }
}

other_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:textColor="@color/text_blue"
        android:gravity="center"
        android:text="呵呵"/>

</LinearLayout>

OtherFragment.java

package com.example.a73435.wei_xin_interface;


import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class OtherFragment extends Fragment {
    private String context;
    private TextView mTextView;

    public OtherFragment(String context) {
        this.context = context;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.other_fragment, container, false);
        mTextView = (TextView) view.findViewById(R.id.textView);
        mTextView.setText(context);
        return view;
    }
}

参考博客：https://blog.csdn.net/jxq1994/article/details/52573506

仿微信底部导航栏

猜你喜欢