Android中的RadioGroup+ViewPager+Fragment导航样式实现（续）

最新推荐文章于 2024-01-27 10:49:46 发布
最新推荐文章于 2024-01-27 10:49:46 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Android 文章标签： radiogroup viewpager 导航 fragment
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011581891/article/details/45074451
版权 
本篇的导航样式的实现和上一篇的RadioGroup导航样式的实现略有不同，主要就是RadioButton下面的指示器（indicator）的切换不同，上次用的是View.setVisibility()这个方法，这次呢 用的是动态计算距离，使得滑动page时指示器有个实时的移动效果，当然呢这实现起来也很简单啦。最近研究下谷歌官方的下拉刷新组件SwipeRefreshLayout，也一并加入进去了，大家可以看下。注意android.support.v4.widget.SwipeRefreshLayout这个v4包需要api19的v4包，如果是20的话，那么样式又变了。

废话不多说，先上图：
这里写图片描述

这里写图片描述

代码的实现：
结构图如下

这里写图片描述

activity_main.xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="#200f">
    <RadioGroup
        android:id="@+id/main_rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/indicator_text_1"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text1"
            android:textColor="@color/green"
            android:textSize="@dimen/rb" />

        <RadioButton
            android:id="@+id/indicator_text_2"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text2"
            android:textSize="@dimen/rb" />

        <RadioButton
            android:id="@+id/indicator_text_3"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text3"
            android:textSize="@dimen/rb" />

        <RadioButton
            android:id="@+id/indicator_text_4"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text4"
            android:textSize="@dimen/rb" />

        <RadioButton
            android:id="@+id/indicator_text_5"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text5"
            android:textSize="@dimen/rb" />

        <RadioButton
            android:id="@+id/indicator_text_6"
            style="@style/main_rb"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:text="@string/main_bar_text6"
            android:textSize="@dimen/rb"
            android:visibility="gone" />
    </RadioGroup>

    <TextView
        android:id="@+id/indicator_line"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="#0f0"
        android:gravity="center_horizontal"
        android:visibility="visible" />
</LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

fragment.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" >

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/id_swipe_ly"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ListView
            android:id="@+id/id_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </ListView>
    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

注意：上面的v4包需要引入api19的v4包

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="green">#0f0</color>
    <color name="black">#000</color>
    <color name="white">#fff</color>
    <color name="yellow">#FF9933</color>
    <color name="blue_50">#500f</color>
    <color name="light_white">#ffa</color>
    <color name="red">#f00</color>
    <color name="pink">#9933CC</color>
</resources>

string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">消息系统</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

    <string name="main_bar_text1">说明</string>
    <string name="main_bar_text2">消息通知</string>
    <string name="main_bar_text3">个人信息</string>
    <string name="main_bar_text4">最新消息</string>
    <string name="main_bar_text5">备注</string>
    <string name="main_bar_text6">查看</string>
</resources>

dimens.xml

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="main_bar_top">10dp</dimen>

    <dimen name="rb">14sp</dimen>
</resources>

MainActivity.java

package com.vac.demo_maincontent;

import java.util.ArrayList;

import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.MenuItem;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
        OnCheckedChangeListener, OnPageChangeListener {

    private RadioGroup main_rg;
    private RadioButton indicator_text_1, indicator_text_2, indicator_text_3,
            indicator_text_4, indicator_text_5;
    private TextView indicator_line;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setActionBar();
        initView();
        MyAdapter mAdapter = new MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(mAdapter);
        viewPager.setOnPageChangeListener(this);
    }

    private void initView() {
        main_rg = (RadioGroup) findViewById(R.id.main_rg);
        main_rg.setOnCheckedChangeListener(this);
        indicator_text_1 = (RadioButton) findViewById(R.id.indicator_text_1);
        indicator_text_2 = (RadioButton) findViewById(R.id.indicator_text_2);
        indicator_text_3 = (RadioButton) findViewById(R.id.indicator_text_3);
        indicator_text_4 = (RadioButton) findViewById(R.id.indicator_text_4);
        indicator_text_5 = (RadioButton) findViewById(R.id.indicator_text_5);
        indicator_line = (TextView) findViewById(R.id.indicator_line);

        viewPager = (ViewPager) findViewById(R.id.main_viewPager);

    }

    @SuppressLint("NewApi") private void setActionBar() {
        ActionBar actionBar = getActionBar();
        actionBar.setHomeButtonEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
     if (id == android.R.id.home) {
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onCheckedChanged(RadioGroup radiogroup, int radiobutton) {
        switch (radiobutton) {

        case R.id.indicator_text_1:
            viewPager.setCurrentItem(0);
            setIndicatorMargin(0);
            break;
        case R.id.indicator_text_2:
            viewPager.setCurrentItem(1);
            setIndicatorMargin(1);
            break;
        case R.id.indicator_text_3:
            viewPager.setCurrentItem(2);
            setIndicatorMargin(2);
            break;
        case R.id.indicator_text_4:
            viewPager.setCurrentItem(3);
            setIndicatorMargin(3);
            break;
        case R.id.indicator_text_5:
            viewPager.setCurrentItem(4);
            setIndicatorMargin(4);
            break;
        case R.id.indicator_text_6:
            viewPager.setCurrentItem(5);
            setIndicatorMargin(5);
            break;

        default:
            break;
        }

    }

    private void setIndicatorMargin(int index) {
        LinearLayout.LayoutParams params = (android.widget.LinearLayout.LayoutParams) indicator_line
                .getLayoutParams();
        params.setMargins((int) (indicator_line.getWidth() * (getResources()
                .getDisplayMetrics().widthPixels / 5 * index)), 0, 0, 0);
        indicator_line.setLayoutParams(params);
    }

    class MyAdapter extends FragmentPagerAdapter {
        ArrayList<Fragment> list = new ArrayList<Fragment>();

        public MyAdapter(FragmentManager fm) {
            super(fm);

            for (int i = 0; i < 5; i++) {
                MyFragment fragment = new MyFragment();
                Bundle bundle = new Bundle();
                bundle.putInt("index", i);
                fragment.setArguments(bundle);
                list.add(fragment);
            }
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
    }

    @Override
    public void onPageScrolled(int position, float percent, int width) {
        LinearLayout.LayoutParams params = (android.widget.LinearLayout.LayoutParams) indicator_line
                .getLayoutParams();
        params.setMargins(
                (int) (indicator_text_1.getWidth() * (percent + position)), 0,
                0, 0);
        params.width = getIndicatorWidth(position);
        indicator_line.setLayoutParams(params);
        setRadioButtonTextColor(position, percent);
    }

    @Override
    public void onPageSelected(int position) {
    }

    private int getIndicatorWidth(int index) {
        switch (index) {
        case 0:
            return indicator_text_1.getWidth();
        case 1:
            return indicator_text_2.getWidth();
        case 2:
            return indicator_text_3.getWidth();
        case 3:
            return indicator_text_4.getWidth();
        case 4:
            return indicator_text_5.getWidth();

        }
        return indicator_line.getWidth();
    }

    private void setRadioButtonTextColor(int index, float percent) {
        Log.v("TAG", "index=" + index + ",percent=" + percent);
        switch (index) {
        case 0:
            indicator_text_1.setTextColor(Color.rgb(0,
                    (int) (200 * (1 - percent)), 0));
            indicator_text_2.setTextColor(Color
                    .rgb(0, (int) (200 * percent), 0));
            indicator_text_3.setTextColor(getResources().getColor(R.color.black));
            indicator_text_4.setTextColor(getResources().getColor(R.color.black));
            indicator_text_5.setTextColor(getResources().getColor(R.color.black));
            break;
        case 1:
            indicator_text_2.setTextColor(Color.rgb(0,
                    (int) (200 * (1 - percent)), 0));
            indicator_text_3.setTextColor(Color
                    .rgb(0, (int) (200 * percent), 0));
            indicator_text_1.setTextColor(getResources().getColor(R.color.black));
            indicator_text_4.setTextColor(getResources().getColor(R.color.black));
            indicator_text_5.setTextColor(getResources().getColor(R.color.black));
            break;
        case 2:
            indicator_text_3.setTextColor(Color.rgb(0,
                    (int) (200 * (1 - percent)), 0));
            indicator_text_4.setTextColor(Color
                    .rgb(0, (int) (200 * percent), 0));
            indicator_text_1.setTextColor(getResources().getColor(R.color.black));
            indicator_text_2.setTextColor(getResources().getColor(R.color.black));
            indicator_text_5.setTextColor(getResources().getColor(R.color.black));
            break;
        case 3:
            indicator_text_4.setTextColor(Color.rgb(0,
                    (int) (200 * (1 - percent)), 0));
            indicator_text_5.setTextColor(Color
                    .rgb(0, (int) (200 * percent), 0));
            indicator_text_3.setTextColor(getResources().getColor(R.color.black));
            indicator_text_1.setTextColor(getResources().getColor(R.color.black));
            indicator_text_2.setTextColor(getResources().getColor(R.color.black));
            break;
        case 4:
            indicator_text_5.setTextColor(Color.rgb(0,
                    (int) (200 * (1 - percent)), 0));
            indicator_text_1.setTextColor(getResources().getColor(R.color.black));
            indicator_text_2.setTextColor(getResources().getColor(R.color.black));
            indicator_text_3.setTextColor(getResources().getColor(R.color.black));
            indicator_text_4.setTextColor(getResources().getColor(R.color.black));
            break;

        default:
            break;
        }
    }
}

MyFragment.java

package com.vac.demo_maincontent;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.support.v4.widget.SwipeRefreshLayout;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;


public class MyFragment extends Fragment implements
        SwipeRefreshLayout.OnRefreshListener {

    private SwipeRefreshLayout sRefresh;
    private ListView mListView;
    private ArrayAdapter<String> mAdapter;
    private List<String> mList = new ArrayList<String>(Arrays.asList("Java",
            "Javascript", "C++", "Ruby", "Json", "HTML"));
    private Handler mHandler;

    @SuppressLint("NewApi") @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, container, false);
        sRefresh = (SwipeRefreshLayout) view.findViewById(R.id.id_swipe_ly);
        mListView = (ListView) view.findViewById(R.id.id_listview);
        sRefresh.setOnRefreshListener(this);
        sRefresh.setColorScheme(R.color.green, R.color.yellow, R.color.red, R.color.pink);
        mAdapter = new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_1, mList);
        mListView.setAdapter(mAdapter);

        Bundle bundle = getArguments();
        int index = bundle.getInt("index");
        switch (index) {
        case 0:
            break;
        case 1:
            break;
        case 2:
            break;
        case 3:
            break;
        case 4:
            break;

        default:
            break;
        }

        mHandler = new Handler() {
            @SuppressLint("SimpleDateFormat")
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                if (msg.what == 1) {
                    Log.v("TAG", "the thread haved sended the message");
                    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                    mList.add(0, format.format(new Date()));
                    mAdapter.notifyDataSetChanged();
                    sRefresh.setRefreshing(false);
                }
            }
        };
        return view;
    }

    @Override
    public void onRefresh() {
          new Thread(new Runnable() {
              @Override
              public void run() {
                try {
                  Thread.sleep(2000);
                } catch (InterruptedException e) {
                  e.printStackTrace();
                }
                mHandler.sendEmptyMessage(1);
              }
            }).start();
    }
}

怎么样，其实实现起来还是很简单的，主要是运用public void onPageScrolled(int position, float percent, int width) 这个方法，根据滑动的百分比动态计算指示器的margin，然后设置setLayoutParams(params)就OK了

点击下载源码

yufengvac
关注
专栏目录
【Android】ViewPager + RadioGroup + Fragment 实现底部导航栏和页面切换
weixin_52137816的博客
07-21 1152
ViewPager + RadioGroup + Fragment 实现底部导航栏和页面切换
Android软件架构之RadioGroup + Fragment , TabLayout + ViewPager +Fragment
10-24
本主题主要探讨的是一个常见的Android软件架构设计，它结合了RadioGroup、Fragment、TabLayout和ViewPager组件，以实现类似今日头条等主流应用的界面和交互效果。这个架构模式在商业软件中广泛应用，因为它提供了...
安卓实现RadioGroup+Viewpager+Fragment底部导航栏和viewpager联动 DEMO下载
03-21
使用RadioGroup+Viewpager+Fragment实现底部菜单栏和viewpager页面联动. viewpager里是碎片 点击菜单栏viewpager滚动, 滑动viewpager底部菜单栏跟着滚动 有问题欢迎指出!
Android 必知必会 - RadioGroup 和 ViewPager 联动
他叫自己Mr.张
09-20 4025
如果移动端访问不佳或需要更好的阅读体验，欢迎使用 ==> Github 版使用 RadioGroup 和 ViewPager 实现更加可定制的效果。背景昨天设计图刚出一点，写了《Android 必知必会 - 动态切换着色模式和全屏模式》，记录了动态修改页面显示模式的方式。今天又有新图，不过设计师只考虑 iOS 平台的设计，拿到设计图发现 TabLayout + ViewPager 的套路实现起来很麻
Android使用RadioGroup + ViewPager制作底部导航栏
qq_46020030的博客
01-31 1103
①首先创建一个空项目。在对应的layout文件中，使用linearlayout布局，上面为一个androidx.viewpager.widget.ViewPager，下面是一个RadioGroup，根据自己的情况，可以设置radiobutton。 代码如下：省略了几个RadioButton <androidx.viewpager.widget.ViewPager android:id="@+id/vp_dist" android:layout_weight="10" andro
Android之RadioGroup+ViewPager制作的底部导航栏
weixin_34293911的博客
08-07 199
在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种，今天就为大家介绍一种实现简单，可控性好的底部导航的实现方法。 首先创建activity_main.xml布局文件，里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment，RadioGroup布局底部导航。 &lt;LinearLayout xmlns:android="h...
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
晨曦
09-09 1183
实现效果图如下： PS：下面那个红色的我也不知道是怎么回事，看到上面的两层水印了，它们的存在证明了我的穷。 在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种，今天就为大家介绍一种实现简单，可控性好的底部导航的实现方法。 1.创建布局 首先创建一个项目 ，然后再MainActivity的布局文件中放两个控件 ViewPager和RadioGroup。代码如下 <?...
RadioGroup+ViewPager制作的底部导航栏
04-14
本教程将探讨如何利用`RadioGroup`和`ViewPager`来实现这样一个功能丰富的底部导航栏。 首先，`RadioGroup`是Android SDK中的一个视图组，它允许你在其中放置一系列的单选按钮（RadioButton）。`RadioGroup`的主要...
ViewPager+RadioGroup+Fragment实现选项卡
05-24
`Fragment`是Android中的一个组件，它代表了应用界面的一部分可重用内容。在选项卡式界面中，每个`Fragment`通常对应一个选项卡的内容。`Fragment`有自己的生命周期，可以独立于Activity进行管理，这样可以提高代码...
android 菜单导航 (Fragment + RadioGroup)
weixin_33895657的博客
12-31 180
网上有很多讲利用Fragment + RadioGroup，actionbar + viewPager和TabHost做菜单导航和切换的例子。对于第三种现在已经过时了。所以讲讲自己对第一个的理解和经验分享，不过在此也简单说说第二种。 1、actionbar + viewpager 对于这种方式，其实在利用eclipse创建Activity的时候就可以...
RadioGroup+ViewPager左右滑动
01-29
使用RadioGroup+ViewPager实现左右滑动，可以点击分类切换页面
使用ViewPager+RadioGroup+Fragment实现类似微信的底部导航
07-28
ViewPager+RadioGroup+Fragment实现类似微信的底部导航
ViewPager+radiogroup+fragment完美结合
09-23
ViewPager+radiogroup+fragment完美结合，框架已经搭好，分分钟开发自己的APP！使用中发现什么不足之处，欢迎留言指正！
Android ViewPager与radiogroup实现关联示例
01-20
Android ViewPager与radiogroup实现关联 效果图展示 Android ViewPager与radiogroup实现关联步骤 1.实例化ViewPager 2.通过LayoutInflater加载布局，返回View结果 3.把生成的每一个View对象添加到List集合中 4.实例化适配器，传递View集合 5.在适配器中继承自PagerAdapter，实现内部的四个方法 getCount(); 返回视图的数量 isViewFromObject(); 是否通过对象加载视图 View==object instantiateltem(); 加载当前页面
Android底部导航栏创建——ViewPager + RadioGroup
最新发布
qq_33209777的博客
01-27 1801
2，当用户点击RadioGroup部分中的RadioButton，被点击的RadioButton出现被选中时的颜色，ViewPager界面对应于RadioButton的页面会出现在当前界面。1，ViewPager部分触摸左右滑动切换页面，RadioGroup部分中的RadioButton随着自己对应的ViewPager页面出现选中时的状态，包括改变背景颜色，这个状态选择器是放置在res/drawable目录下的一个普通状态选择器，该选择器的属性android:drawable的属性值不能直接设置颜色，
ViewPager+RadioGroup+Fragment仿微信实现底部导航功能
芒酱的博客
03-26 1361
ViewPager+RadioGroup+Fragment仿微信实现底部导航功能                   今天做一个简单的仿微信底部导航功能，先简单说明一下组件，主体是一个FrameLayout,在这个帧布局上添加两个控件，ViewPager 和RadioGroup, 然后在ViePager中添加Fragment，实现导航功能.                      
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值