首页 » Android » Android基础学习总结(七)——简单实现新闻选项卡滑动效果(

Android基础学习总结(七)——简单实现新闻选项卡滑动效果(

原文 http://blog.csdn.net/kilotwo/article/details/79197498

2018-01-30 02:01:15阅读(272)

引言

曾经看到网易、头条新闻就想自己实现一下效果,结果花费了不少时间,基础不牢,地动山摇,现在一步步深入学习Android后发现实现一下也不难,现在就简单记录下自己的实现思路和方法,供自己以后参考。

实现思路

首先能看到的应该是三个部分Toolbar+TabLayout+ViewPager,再细分下去,ViewPager包含了一个Recyclerview,里面有很多itemview来显示和滑动,往大了看,还有AppBarLayout包裹Toolbar和TabLayout作为顶部栏,最后整个包上CoordinatorLayout协调其所包裹的子view的手势操作的,大致就酱,具体实现下面一步步看。

关于ViewPager

1.一个页面切换的组件,可以往里面填充多个View,可以通过触摸屏幕左右滑动来切换不同的View,官方连接ViewPager ,和大多数情况一样需要一个Adapter适配器,将要显示的View和ViewPager绑定,由于官方建议使用Fragment来填充ViewPager这样方便生成与管理生命周期等等,一般主要使用FragmentPageAdapter,它的缓存机制是缓存当前页,前一页和后一页共3页这样。
2.使用PagerAdapter的重要方法:

getCount( ):获得viewpager中有多少个view destroyItem( ):移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。 instantiateItem( ):①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了,当然你也可以自定义自己的key,但是key和每个view要一一对应的关系 isViewFromObject( ):判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的,对应的表示同一个View),通常我们直接写return view == object;就可以了,至于为什么要这样讲起来比较复杂,后面有机会进行了解吧,貌似是ViewPager中有个存储view状态信息的ArrayList,根据View取出对应信息的吧! 关于AppBarLayout

AppBarLayout控件,它是继承LinerLayout实现的一个ViewGroup容器组件,是为了Material Design而设计的App Bar,支持手势滑动操作。
默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout包裹的内容都作为AppBar。
使用方式非常简单,直接在布局文件中包裹想要作为顶部栏的控件,例如Toolbar和TabLayout.

关于CoordinatorLayout

CoordinatorLayout是一个增强型的FrameLayout,它的作用就是用来协调其所包裹的子view的手势操作的.
为了达到手势动画效果,我们必须做如下设置,通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的.关于layout_scrollFlags的属性设置,在布局文件中描述,这里就不多说了.
同时,为了使得Toolbar可以滑动,我们必须还得有个条件,就是CoordinatorLayout布局下包裹一个可以滑动的布局,比如: RecyclerView,NestedScrollView(ListView,ScrollView不支持)具有滑动效果的组件。并且还需要给这些组件设置如下属性来告诉CoordinatorLayout
app:layout_behavior="@string/appbar_scrolling_view_behavior"
该组件是带有滑动行为的组件,然后CoordinatorLayout在接受到滑动时会通知AppBarLayout中可滑动的Toolbar可以滑出屏幕了。

关于TabLayout

TabLayout是design库提供的控件,可以方便的使用指示器,功能类似ViewPagerIndicator.
使用非常方便,Android Studio只需要在gradle中引入design即可使用.
来看看配合ViewPager的使用方式,实现如下效果图:
Android基础学习总结(七)——简单实现新闻<a href=选项卡滑动效果(" src="http://img.blog.csdn.net/20180129165658845?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2lsb3R3bw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="xiaoguotu1" title="">

app:tabGravity=”center” 对齐方式,可选fill和center app:tabIndicatorColor=”@color/colorAccent” 设置tab下划线的颜色 app:tabMode=”scrollable” scrollable是可以横行滚动,fixed是指固定个数 app:tabSelectedTextColor=”@color/colorPrimaryDark” 选择tab的文本颜色 app:tabTextColor=”@color/colorPrimary” 普通tab字体颜色
    //1.支持添加字符串文本tab 
    //tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
    //2.支持添加图片tab 
    //tabLayout.addTab(tabLayout.newTab().setIcon(R.mipmap.ic_launcher));
    //3.支持添加View
    View tabView = View.inflate(TabLayoutOnlyActivity.this, R.layout.view_tab, null);
    ((TextView)tabView.findViewById(R.id.tv_title)).setText("TAB" + i);
    tabLayout.addTab(tabLayout.newTab().setCustomView(tabView));
关于Toolbar和Recyclerview

这部分可以参考我之前的文章(✿◡‿◡)
Toolbar
Recyclerview

开始大合成

1.使用之前,别忘了在gradle中引入Material Design支持包

  compile 'com.android.support:design:25.3.1'

另外,由于使用了Toolbar需要修改style中的ActionBar

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

2.直接看完整布局activity_main.xml:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="study.test6.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--标题栏
        设置的layout_scrollFlags有如下几种选项:
        scroll: 所有想滚动出屏幕的view都需要设置这个flag-没有设置这个flag的view将被固定在屏幕顶部。
        enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。
        enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,
                              你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
        exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#c0f9d0"
        app:layout_scrollFlags="scroll|enterAlways"
        />
        <!--选项卡-->
   <android.support.design.widget.TabLayout
       android:id="@+id/tablayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabGravity="center"
       android:background="#c0f9d0"
       app:tabIndicatorColor="@color/colorAccent"
       app:tabMode="scrollable"
       app:tabSelectedTextColor="@color/colorPrimaryDark"
       app:tabTextColor="@color/colorPrimary"
       />
    </android.support.design.widget.AppBarLayout>
    <!--包含可滑动的布局内容(RecyclerView,NestedScrollView,不支持ListView,ScrollView)
    必须要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"
    属性来告知CoordinatorLayout该组件是带有滑动行为的组件,
    然后CoordinatorLayout在接受到滑动时会通知AppBarLayout中可滑动的Toolbar可以滑出屏幕,
    这个滑动布局RecyclerView我写在fragment -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
       >
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

3.fragment.xml
fragment的布局就简单包含一个RecyclerView

<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.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

item.xml
这个是用来显示的item

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/list_item">
    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        />
    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

4.接着给ViewPager弄个适配器
mFragmentPagerAdapter.java

public class mFragmentPagerAdapter extends FragmentPagerAdapter {
    private MyFragment myFragment =null;
    public mFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        myFragment =new MyFragment();
       //这里可以根据位置返回相应的Fragment,例如娱乐,体育,新闻等等单独弄个Fragment
        myFragment.setTitle("This is "+position);
        return myFragment;
    }
    @Override       
    public CharSequence getPageTitle(int position) {     //返回Tab名字
        String name ="Tag"+position;
    return  name;
    }
    @Override
    public int getCount() {
        return 6;           //这里就简单返回个固定数字,可以根据需要返回Tab的数量
    }
}

5.配置好RecyclerAdapter
主要就是自定义个MyViewHolder,具体配置看代码:
RecyclerAdapter.java

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> {
    static class MyViewHolder extends RecyclerView.ViewHolder
    {
        private TextView textView;
        private ImageView   imageView;
        public MyViewHolder(View itemview)
        {
            super(itemview);
            textView= (TextView) itemview.findViewById(R.id.content);
            imageView= (ImageView) itemview.findViewById(R.id.image);
        }
    }
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        MyViewHolder viewHolder =new MyViewHolder(view);//实例化viewholder
        return viewHolder;
    }
    @Override
    public void onBindViewHolder(MyViewHolder myViewHolder, int position) {
        myViewHolder.textView.setText("Test"+position);
        myViewHolder.imageView.setImageResource(R.drawable.back);
    }
    @Override
    public int getItemCount() {
        return 15;          //返回个每页的数量
    }
}

6.自定义MyFragment

public class MyFragment extends Fragment {
    private String Title;   //可以根据这个修改item里面的内容
    private RecyclerView recyclerView;
    public void setTitle(String title) {
        Title = title;
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  Bundle savedInstanceState) {
    //拿到fragment的view,之后实例化recyclerView,然后创建适配器,再挂上recyclerView
        View view =inflater.inflate(R.layout.fragment,container,false);
        recyclerView= (RecyclerView) view.findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        RecyclerAdapter recyclerAdapter=new RecyclerAdapter();
        recyclerView.setAdapter(recyclerAdapter);
        return view;
    }
}

7.最后是主代码MainActivity.java
主要就是初始化布局,以及关联viewPager和tablayout并且配置好相应的适配器

public class MainActivity extends AppCompatActivity {
   private TabLayout tabLayout;
   private ViewPager viewPager;
   private mFragmentPagerAdapter mFragPAdapter;
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mFragPAdapter=new mFragmentPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(mFragPAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu,menu);
        return true;
    }
}
最终效果

Android基础学习总结(七)——简单实现新闻选项卡滑动效果(

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹