android 可滑动、点击切换的导航栏

原创 2015年11月19日 11:07:01

目前很多应用都是支持滑动切换的,其中实现原理是,顶部是一个RadioGroup + 下面的线条 (我用的是填充)Imageview。

写这个Demo的整个思维是这样的,相当于是图层,最底层是一个Fragment,接着分为顶部 FirstRadioGroup 和 下半部分 ViewPager;然后我这里ViewPager里也是一层Fragment,即下面代码里命名的ContentFragment。

导航栏的菜单是可以在代码里随意添加的,不是固定布局,所以贴出布局代码 :fragment_home.xml

<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"
    android:background="@android:color/white">

    <android.com.test.FirstRadioGroup
        android:id="@+id/first_radio_group"
        android:layout_width="match_parent"
        android:layout_height="40dip">
        <RelativeLayout
            android:id="@+id/radio_group_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            >

            <RadioGroup
                android:id="@+id/radio_group"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:background="@android:color/white">

            </RadioGroup>
            <ImageView
                android:id="@+id/indicator"
                android:layout_width="1dip"
                android:layout_height="2dip"
                android:background="#577fbc"
                android:layout_alignParentBottom="true"
                android:scaleType="matrix"
                />
        </RelativeLayout>

    </android.com.test.FirstRadioGroup>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/first_radio_group">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </FrameLayout>


</RelativeLayout>
我这边的导航标签不支持滑动,如果需要滑动,可以在FirstRadioGroup外面嵌套一层横向滑动的HorizontalScrollView,就可以了,下面贴FirstRadioGroup类的代码

package android.com.test;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.Context;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class FirstRadioGroup extends FrameLayout {

   private View view;

   private Activity mContext;

   private LayoutInflater mInflater;
   private RadioGroup mRadioGroup;
   private ImageView mIndicatorImg;
   private int count;//标签个数
   private int indicatorWidth;//每个标签的宽度
   private int currentIndicatorLeft = 0;
   private ViewPager mViewPager;

   public void setSomeParam(View view, ViewPager mViewPager, int[] ids,Activity context) {
      this.mContext = context;
      this.view = view;
      this.mViewPager = mViewPager;
      mInflater = LayoutInflater.from(context);
      DisplayMetrics dm = new DisplayMetrics();
      this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);
      int windowWitdh = dm.widthPixels;
      this.count = ids.length;
      indicatorWidth = windowWitdh / count;
      init(ids);
   }

   public FirstRadioGroup(Context context) {
      super(context);
      // TODO Auto-generated constructor stub
   }

   public FirstRadioGroup(Context context, AttributeSet attrs) {
      super(context, attrs);
      // TODO Auto-generated constructor stub
   }

   private void init(int[] ids) {
      mRadioGroup = (RadioGroup) view.findViewById(R.id.radio_group);
      mIndicatorImg = (ImageView) view.findViewById(R.id.indicator);
      initIndicatorWidth();
      initNavigationHSV(ids);
      setListener();
   }

   //初始化滑动下标的宽
   private void initIndicatorWidth() {
      ViewGroup.LayoutParams cursor_Params = mIndicatorImg
            .getLayoutParams();
      cursor_Params.width = indicatorWidth;
      mIndicatorImg.setLayoutParams(cursor_Params);
   }

   @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
   private void initNavigationHSV(int[] ids) {
      mRadioGroup.removeAllViews();
      for (int i = 0; i < this.count; i++) {
         RadioButton rb = (RadioButton) mInflater.inflate(
               R.layout.first_radiogroup_item, null);
         rb.setId(i);
         rb.setText(ids[i]);
         rb.setBackground(null);
         rb.setLayoutParams(new LayoutParams(indicatorWidth,
               LayoutParams.MATCH_PARENT));
         mRadioGroup.addView(rb);
      }
      mRadioGroup.check(0);
   }

   private void setListener() {
      mRadioGroup
            .setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
               @Override
               public void onCheckedChanged(RadioGroup group, int checkedId) {
                  if (mRadioGroup.getChildAt(checkedId) != null) {
                     moveAnimation(checkedId);
                     mViewPager.setCurrentItem(checkedId); // ViewPager
                  }
               }
            });
   }
   //动画移动效果
   private void moveAnimation(int checkedId){
      TranslateAnimation animation = new TranslateAnimation(currentIndicatorLeft,
            indicatorWidth * checkedId,0f, 0f);
      animation.setInterpolator(new LinearInterpolator());
      animation.setDuration(200);
      animation.setFillAfter(true);

      // 执行位移动画
      mIndicatorImg.startAnimation(animation);

      // 记录当前 下标的距最左侧的 距离
      currentIndicatorLeft = indicatorWidth * checkedId;
   }}

HomeFragment.java 

package android.com.test;


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;

/**
 * Created by BaJie on 2015/11/18.
 */
public class HomeFragment extends BaseFragment {

    static HomeFragment fragment = null;
    private FragmentControlCenter mControlCenter;
    private Fragment mFragment;
    private Activity mThis;

    RadioGroup mRadioGroup;
    ViewPager mViewPager;
    ImageView mIndicator;
    FirstRadioGroup firstRadioGroup;
    RelativeLayout mRedioGroupLayout;
    public static HomeFragment newInstance() {
        if (fragment == null) {
            fragment = new HomeFragment();
        }
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }

    @SuppressWarnings("ResourceType")
    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        mThis = getActivity();
        mRadioGroup = (RadioGroup)view.findViewById(R.id.radio_group);
        mViewPager = (ViewPager)view.findViewById(R.id.view_pager);
        mIndicator = (ImageView)view.findViewById(R.id.indicator);
        mRedioGroupLayout = (RelativeLayout)view.findViewById(R.id.radio_group_layout);
        firstRadioGroup = (FirstRadioGroup) view.findViewById(R.id.first_radio_group);
        mControlCenter = FragmentControlCenter.getInstance(mThis);
        initViewPager();
        int[] ids = {R.string.title_pic,R.string.title_haha};
        firstRadioGroup.setSomeParam(mRedioGroupLayout, mViewPager, ids, mThis);

    }

    private void initViewPager() {
        Log.i("smile", "initViewPager************* ");
        mViewPager.setAdapter(new HomePagerAdapter(getChildFragmentManager()));
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mRadioGroup.check(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }

    private class HomePagerAdapter extends FragmentPagerAdapter {
        public HomePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            mFragment = mControlCenter.getFragment(1);
            setBundleArguments(mFragment, "BALABALA MO FA " + position);

            return mFragment;
        }

        @Override
        public int getCount() {
            return 2;
        }
    }
    private void setBundleArguments(Fragment fragment, String content) {
        Bundle args = new Bundle();
        args.putString("content", content);
        Log.i("smile", "setBundleArguments ---------content = " + content);
        fragment.setArguments(args);
    }

}

ContentFragment.java

package android.com.test;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by BaJie on 2015/11/18.
 */
public class ContentFragment extends Fragment {
    private TextView mTxt;
    private Activity mThis;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_content, container,
                false);
        mTxt = (TextView) rootView.findViewById(R.id.content_txt);
        mTxt.setText(getArguments().getString("content"));
        return rootView;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        mThis = getActivity();
    }

}

FragmentControlCenter.java

package android.com.test;

import android.content.Context;
import android.support.v4.app.Fragment;


public class FragmentControlCenter {
    private static FragmentControlCenter instance;

    private FragmentControlCenter(Context context) {
    }


    public static synchronized FragmentControlCenter getInstance(Context context) {
        if (instance == null) {
            instance = new FragmentControlCenter(context);
        }
        return instance;
    }


    public Fragment getFragment(int i) {
        Fragment fragment = null;
        switch (i) {
            case 0:
                fragment = new HomeFragment();
                break;
            case 1:
                fragment = new ContentFragment();
                break;

        }

        return fragment;
    }

}

fragment_content.xml

<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"
    android:background="@android:color/white">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/content_txt"
        android:textColor="@android:color/holo_red_dark"/>
</RelativeLayout>

first_radiogroup_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RadioButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:background="@android:color/holo_blue_bright"
    android:button="@null"
    android:checked="true"
    android:gravity="center"
    android:text=""
    android:textSize="14.0sp"
    android:textColor="@android:color/black"/>

下面是运行的截图:





相关文章推荐

教你如何使用ViewPager+Fragment一步步打造顶部导航界面滑动效果

最近在整理以前的知识点,重新碰到了以前项目中的一个滑动分页的效果,就打算写这么一篇文章分享一下ViewPager的经典使用 在许多应用中,我们常常用到这么一个效果: 可以看到,...

iOS中左右滑动切换,滑动标签页导航的设计思路

iOS中左右滑动切换,滑动标签页导航的设计思路 iOS开发中经常(几乎每个APP都含有这样的页面吧,几乎!UI设计师也都是这样抄来抄去…..) demo见Github:https://gi...
  • IT_ZGC
  • IT_ZGC
  • 2016年08月15日 15:49
  • 2252

Android 顶部切换实现(二)

上篇介绍了导航栏下的滑动切换实现,这次要介绍的是导航栏上的切换,在很多应用中经常见到,先看效果图。当点击导航条上的分类的时候,会根据选中的分类显示下面的数据。先看布局文件。...
  • cswhale
  • cswhale
  • 2016年11月07日 17:12
  • 1175

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android 快速实现 ViewPager 滑动页卡切换(可用作整个 app上导航)

我记得在前面,我写了一篇Android 微信6.1 tab栏图标和字体颜色渐变的实现,如果大家仅仅认为这篇文章的功能只是模仿微信颜色渐变效果,那就大错特错了!认真阅读了这篇文章的朋友,肯定知道,这里面...
  • jxxfzgy
  • jxxfzgy
  • 2015年03月10日 08:16
  • 4242

android基于Fragment实现底部导航切换

android基于Fragment实现底部导航切换 android实现底部导航有很多种方式,这里给出利用Fragment组件来实现。 先来看效果图:   代码部分: activity_main.x...
  • Hardor
  • Hardor
  • 2015年09月15日 14:31
  • 1218

fragment的简单使用,点击底下导航栏切换activity的fragment。

这只是一个很简单的例子,fragment里面只写了简单区分的内容。并且这里只写到了动态添加fragment,因为动态添加使用情况要比较多。 关于Fragment的介绍这里不做过多说明,详情请看鸿洋大神...

Android 滑动标题导航栏

现在Android应用开发中因为功能比较多所以都喜欢用viewpager+fragment的方式加入更多的页面,而每每使用这种模式,标题栏导航也是必不可少的,因此又会重复写很多导航菜单的代码,程序猿都...
  • ywl5320
  • ywl5320
  • 2016年07月09日 16:15
  • 2847

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android 可滑动、点击切换的导航栏
举报原因:
原因补充:

(最多只允许输入30个字)