使用DrawerLayout实现侧滑菜单，，RadioButton+Fragment实现页面主布局，首页面使用tabLayout+viewPager实现

最新推荐文章于 2021-05-16 23:40:42 发布

sky的喵

最新推荐文章于 2021-05-16 23:40:42 发布

阅读量835

点赞数

CC 4.0 BY-SA版权

分类专栏：基础项目

本文链接：https://blog.youkuaiyun.com/sky__cat/article/details/78312689

基础项目专栏收录该内容

8 篇文章

订阅专栏

题目：

1. 描述

使用DrawerLayout实现如图一的侧滑菜单，主页面内容如图二，RadioButton+Fragment实现页面主布局，首页面使用tabLayout+viewPager实现。其它导航页面，内容自定义。

首页面中，只需实现“推荐”选项卡下的内容即可，其它选项卡内容自定义。

推荐页面中最上方实现viewPager的无限自动轮播，下方实现列表，可进行上拉加载，下拉刷新的效果。图中红框部分的内容不要求实现。

轮播图地址：

"http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg",//海

"http://pic2.nipic.com/20090424/1468853_230119053_2.jpg",//亭子

"http://img3.3lian.com/2013/s1/20/d/57.jpg",//白房子

"http://pic39.nipic.com/20140226/18071023_164300608000_2.jpg",//华

"http://a0.att.hudong.com/15/08/300218769736132194086202411_950.jpg"};//小路

数据请求接口：

http://api.expoon.com/AppNews/getNewsList/type/1/p/1，第二页、第三页分别改变URL中最后一位数据字为2、3

2.案例效果图如下

（图一）

（图二）

实现思路:

2、实现侧滑菜单，菜单页面内容自定义即可，不必与图示一致（10分）

3、使用RadioButton+Fragment实现主页面布局，导航点击可以实现字体颜色的改变（10分）

4、 “首页”页面要求 TabLayout+viewpager实现（10分）

5、 “推荐”标签，上方实现一个viewPager的无限自动轮播（10分），下方实现列表数据的上拉加载，上拉刷新（xListView或pullToRefresh都可）（10分）

6、使用ImageLoader实现图片的异步加载，实现图片的二级缓存，圆角显示，圆角弧度20，磁盘缓存到app对应的sd卡缓存目录。ImageLoader实现全局配置（20分）

代码：

这处为清单文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.bawei.zhangjinfeng.zhangjinfeng1021">
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:name=".MyApp">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

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="com.bawei.zhangjinfeng.zhangjinfeng1021.MainActivity">

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mydrawer">
        <!--主内容区域-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RadioGroup
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:id="@+id/rel_navigate"
                android:layout_alignParentBottom="true">
                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="首页"
                    android:button="@null"
                    android:gravity="center"
                    android:id="@+id/rb_index"
                    android:padding="3dp"
                    android:background="@drawable/rb_selector"
                    android:checked="true"/>
                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="发现"
                    android:button="@null"
                    android:padding="3dp"
                    android:gravity="center"
                    android:id="@+id/rb_video"
                    android:background="@drawable/rb_selector"/>
                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="下载"
                    android:button="@null"
                    android:gravity="center"
                    android:padding="3dp"
                    android:id="@+id/rb_top"
                    android:background="@drawable/rb_selector"/>
                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="我的"
                    android:padding="3dp"
                    android:button="@null"
                    android:gravity="center"
                    android:id="@+id/rb_me"
                    android:background="@drawable/rb_selector"/>

            </RadioGroup>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@id/rel_navigate"
                android:id="@+id/main_content"></FrameLayout>


        </RelativeLayout>
        <RelativeLayout
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:id="@+id/rel_menu"
            android:layout_gravity="start"
            android:background="#fff">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                android:id="@+id/img_title"
                android:layout_marginBottom="50dp"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是侧边栏"
                android:layout_below="@+id/img_title"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是侧边栏"
                android:layout_below="@+id/img_title"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是侧边栏"
                android:layout_below="@+id/img_title"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这是侧边栏"
                android:layout_below="@+id/img_title"
                />
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>







Java代码：实现了侧滑，RadioButton+Fragment实现主页面布局

package com.bawei.zhangjinfeng.zhangjinfeng1021;

import android.os.Bundle;
import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
import com.bawei.zhangjinfeng.zhangjinfeng1021.fragment.IndexFragment;
import com.bawei.zhangjinfeng.zhangjinfeng1021.fragment.MeFragment;
import com.bawei.zhangjinfeng.zhangjinfeng1021.fragment.TopFragment;
import com.bawei.zhangjinfeng.zhangjinfeng1021.fragment.VideoFragment;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private RadioGroup radioGroup;
    private RelativeLayout relMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = (DrawerLayout) findViewById(R.id.mydrawer);
        radioGroup = (RadioGroup) findViewById(R.id.rel_navigate);
        relMenu = (RelativeLayout) findViewById(R.id.rel_menu);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener(){

            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                if(checkedId==R.id.rb_index){
                    addFragment(new IndexFragment());

                }else if(checkedId==R.id.rb_top){
                    addFragment(new TopFragment());

                }else if(checkedId==R.id.rb_me){
                    addFragment(new MeFragment());

                }else if(checkedId==R.id.rb_video){
                    addFragment(new VideoFragment());
                }
//                if (checkedId==R.id.rb_index){
//                    addFragment(new );
//                }
            }
        });
    }

    private void addFragment(Fragment fragment) {
        getSupportFragmentManager().beginTransaction().replace(R.id.main_content,fragment).commit();

    }
}

xml：

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:tabGravity="center"
    app:tabIndicatorColor="@color/colorAccent"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/colorPrimaryDark"
    app:tabTextColor="@color/colorPrimary"
    android:id="@+id/mytab"
    ></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"></android.support.v4.view.ViewPager>

</LinearLayout>
Java代码：


package com.bawei.zhangjinfeng.zhangjinfeng1021.fragment;

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

import com.bawei.zhangjinfeng.zhangjinfeng1021.Find_tab_Adapter;
import com.bawei.zhangjinfeng.zhangjinfeng1021.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by sky on 2017/10/21.
 */

public class IndexFragment extends Fragment{
    private TextView frag;
    private TabLayout mytab;
    private ViewPager vp;
    private Index_recommend_fragment recommendFragment;
    private Index_class_fragment classFragment;
    private Index_combat_fragment combatFragment;
    private Index_way_fragment wayFragment;
    private List<Fragment> list_fragment;
    private List<String> list_title;
    private Find_tab_Adapter fadapter;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.item_idex, null);
        initControls(v);
        return v;
    }

    private void initControls(View v) {
        mytab = (TabLayout) v.findViewById(R.id.mytab);
        vp = (ViewPager) v.findViewById(R.id.vp);
        //初始化各fragment
        recommendFragment = new Index_recommend_fragment();
        classFragment = new Index_class_fragment();
        combatFragment = new Index_combat_fragment();
        wayFragment = new Index_way_fragment();
        //将fragment装进列表
        list_fragment = new ArrayList<>();
        list_fragment.add(recommendFragment);
        list_fragment.add(classFragment);
        list_fragment.add(combatFragment);
        list_fragment.add(wayFragment);

        //将名称加载tab名字列表
        list_title = new ArrayList<>();
        list_title.add("推荐");
        list_title.add("课程");
        list_title.add("实战");
        list_title.add("职业路径");

        //设置TabLayout 的模式
        mytab.setTabMode(TabLayout.MODE_FIXED);
        //为TabLayout添加tab名称
        mytab.addTab(mytab.newTab().setText(list_title.get(0)));
        mytab.addTab(mytab.newTab().setText(list_title.get(1)));
        mytab.addTab(mytab.newTab().setText(list_title.get(2)));
        mytab.addTab(mytab.newTab().setText(list_title.get(3)));
        fadapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(), list_fragment, list_title);

        vp.setAdapter(fadapter);
        mytab.setupWithViewPager(vp);
    }
}