android基础学习-android篇day18-旅游UI之(2-1)主页面实现-功能菜单

2-1.主页面实现-功能菜单

大题思路：
布局分上下两部分一个内容部分、一个菜单按钮部分
每一个菜单点击对一个Fragment
点击首页菜单按钮，通过设置selector实现点击图标的颜色转变(两张照片)
点击之后，Fragment_main的fragment显示，其他两个隐藏(其实一开始添加3个fragment)
点击发现按钮之后，发现fragment显示，其他两个隐藏，
同理，我的按钮，我的fragment显示，其他两个隐藏。

android基础学习-android篇day18-旅游UI之(2-1)主页面实现-功能菜单

fragment包中，装的是三个Fragment，它们分别绑定了layout布局的main、find、me三个fragment布局

drawable包中，装的是3个layout布局中ImageView默认显示的图片选择器，里面处理了点击之后会显示另外一种图片的效果

activity_main中主界面的布局：是相对布局作为整一个容器，里面又有一个相对布局装fragment显示的内容，LinearLayout是底部按钮的布局

android基础学习-android篇day18-旅游UI之(2-1)主页面实现-功能菜单

MainActivity中实现了fragment的初始化加载，并实现OnClickListener的接口，为底部按钮添加监听事件，实现按钮的点击后fragment 的显示和隐藏。

下面贴代码：

fragment_main.xml 其他2个类似

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页"
        android:textSize="50dp"
        android:textColor="#fff"
        />
</RelativeLayout>

对应的menu_main_icon_selector.xml选择器其他两个类似

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

</selector>

对应的MainFragment.java 其他2个类似

/**
 * 主界面视图
 */

public class MainFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_main,container,false);

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">
    <!--内容部分-->
    <RelativeLayout
        android:id="@+id/container_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


    </RelativeLayout>

    <!--底部功能菜单-->
    <LinearLayout
        android:id="@+id/container_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/main_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/menu_main_icon_selector" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="首页"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/main_find"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/menu_find_icon_selector" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发现"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/main_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/menu_me_icon_selector" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="我的"
                android:textColor="#000000" />
        </LinearLayout>


    </LinearLayout>
</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    protected LinearLayout mMenuMain;//主页按钮的布局
    protected LinearLayout mMenuFind;//发现按钮的布局
    protected LinearLayout mMenuMe;//我的按钮布局

    protected MainFragment mainFragment = new MainFragment();//首页
    protected FindFragment findFragment = new FindFragment();//发现
    protected MeFragment meFragment = new MeFragment();//我的

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        //Fragment添加流程
        //获取Fragment管理类
        //事务添加 默认：首页 其他页面隐藏
        //提交
        this.getSupportFragmentManager()
                .beginTransaction()//add(容器,fragment对象)
                .add(R.id.container_content, mainFragment)
                .add(R.id.container_content, findFragment)
                .hide(findFragment)
                .add(R.id.container_content, meFragment)
                .hide(meFragment)
                .commit();

    }

    /**
     * 初始化视图
     */
    public void initView() {
        mMenuMain = this.findViewById(R.id.main_menu);
        mMenuFind = this.findViewById(R.id.main_find);
        mMenuMe = this.findViewById(R.id.main_me);

        //注册按钮监听事件
        mMenuMain.setOnClickListener(this);
        mMenuFind.setOnClickListener(this);
        mMenuMe.setOnClickListener(this);


    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.main_menu://首页
                //显示主界面，隐藏其他两个fragment
                this.getSupportFragmentManager()
                        .beginTransaction()//add(容器,fragment对象)
                        .hide(findFragment)
                        .show(mainFragment)
                        .hide(meFragment).commit();
                break;
            case R.id.main_find://发现
                //隐藏主页面和我的fragment，显示发现fragment
                this.getSupportFragmentManager()
                        .beginTransaction()//add(容器,fragment对象)
                        .hide(mainFragment)
                        .show(findFragment)
                        .hide(meFragment).commit();
                break;
            case R.id.main_me://我的
                //隐藏主页面和发现的fragment，显示我的fragment
                this.getSupportFragmentManager()
                        .beginTransaction()//add(容器,fragment对象)
                        .hide(mainFragment)
                        .hide(findFragment)
                        .show(meFragment).commit();
                break;

        }
    }
}

到这里就完成啦。。。

android基础学习-android篇day18-旅游UI之(2-1)主页面实现-功能菜单

相关推荐