由于只有2个G运存,Ubuntu16.04系统,AndroidStudio运行不起来,只能用Eclipse了,记录下笔记

滑动中的效果图

第一步,导入扩展包,创建应用

• 导入在sdk目录下的/sdk/extras/android/support/design库
• /sdk/extras/android/support/v7/appcompat库
• /sdk/extras/android/support/v7/recyclerview库
• 导入时选择复制到Workspace,三个包导好后右键properties选择23以上的编译版本
• 导入后右键设置isLibrary
• 创建一个Android Project ,选择最低4.0,Target SDK 23, Compiler With 23
• 创建好应用后把前面导入的库引入

第二步 修改MainActivity和清单文件

• 修改MainActivity继承AppCompatActivity

public class MainActivity extends AppCompatActivity

• 关于AppCompatActivity
  Base class for activities that use the support library action bar features.
  You can add an ActionBar to your activity when running on API level 7 or higher by extending
  this class for your activity and setting the activity theme to Theme.AppCompat or a similar theme.
  简单的说,AppCompatActivity是基于Activity并且有带有ActionBar,用来代替ActionbarActivity
  而Actionbar被Toolbar替代
  在AppCompatActivity里有一个 setSupportActionBar(Toolbar toolbar)方法,其文档描述如下:
  Set a Toolbar to act as the ActionBar for this Activity window.
  在AppCompatActivity里就带有直接设置Toolbar的api

• 修改主题

android:theme="@style/MyAppTheme"
该自定义主题在values->styles里定义,在跟标签resources下添加:
<style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 </style>
这里自定义了一个style,继承了一个没有ActionBar的style,目的是为了隐藏ActionBar,
用Toolbar替代
 涉及到的颜色定义在values->color.xml里,该文件定义如下:
 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1e88e5</color>
    <color name="colorPrimaryDark">#536dfe</color>

    <color name="white">#ffffff</color>
    <color name="red">#b71c1c</color>
    <color name="black">#000000</color>
     <color name="gray">#33000000</color>
</resources>

• 关于这些颜色都代表哪些看图

  
  
  

  还有一些我就没有一一定义了,就用支持库自带的

第三步,修改activity_layout.xml,写页面布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="Hello"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize" 
            android:id="@+id/tablayout"
            app:tabIndicatorColor="@color/white"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/black"
            android:background="#1565c0"
            >
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior" 
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        
    </android.support.v4.view.ViewPager>

</android.support.design.widget.CoordinatorLayout>

首先我的ViewPager里填充了RecyclerView,它支持app:layout_behavior属性

• 关于CoordinatorLayout
  CoordinatorLayout继承自android.view.ViewGroup
  1、作为顶层布局,是一个Framelayout的加强版
  2、调度协调子布局,监听子控件,调节子控件
  CoordinatorLayout通过设置 子View 的 Behaviors来调度子View。
• 关于layout_behavior属性
  可以看到在ViewPager里设置了app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,它的值是android.support.design.widget.AppBarLayout$ScrollingViewBehavior,它就是CoordinatorLayout.Behavior的子类,给这个属性后viewpager就会显示在tablayout
  下方,如果没有指定该属性,那么会显示在AppBarLayout下方,个人猜测因为CoordinateLayout
  是一个加强版的framlayout,AppBarLayout后添加进CoordinateLayout里,所以才把ViewPager遮掉了

• 关于AppBarLayout
  AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它支持手势滑动操作,
  通过app:layout_scrollFlags属性来控制滚动时候的表现,当AppBarLayout接收到滚动事件,其
  内部的view就会根据该属性来改变自己,app:layout_scrollFlags="scroll|enterAlways"表示当布局
  向下滚动时隐藏(enterAlways)自身,当布局向上滚动时显示自身(scroll),这里有个细节,就是不管
  AppBarLayout放在哪里,最后都是在顶部

• 关于Toolbar
  继承自android.widget.LinearLayout
  api描述:
  A standard toolbar for use within application content.
  一个标准的Toolbar是用来给应用展示内容的
  A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally
  Toolbar是应用程序布局里的Actionbar的一个扩展,虽然Actionbar通常
  part of an Activity's opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary
  作为不透明的Activity窗体装饰的一部分并且被framework控制,但是Toolbar却可以放在任意
  level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an
  级别的view结构中,应用程序可以用Toolbar来代替Actionbar,
  Activity using the setActionBar() method.
  通过setActionBar方法
  Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a
  Toolbar支持更多了主要特性,从开始到结束,Toolbar会包含以下
  combination of the following optional elements:
  几中元素的组合

A navigation button.
一个导航按钮

A branded logo image.
一个Logo图标

One or more custom views.
一个或者多个自定义view
An action menu.
一个菜单

• 关于TabLayout
  继承自android.widget.HorizontalScrollView
  api描述:
  TabLayout provides a horizontal layout to display tabs
  提供了水平布局展示tab

第四步,修改MainActivity找到控件初始化控件

public class MainActivity extends AppCompatActivity {
    private TabLayout tablayout;
    private ViewPager viewpager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        tablayout = (TabLayout) findViewById(R.id.tablayout);
        viewpager = (ViewPager) findViewById(R.id.viewpager);//viewpager里填充3个fragment
        initView();
    }

    private void initView() {
        ArrayList<Fragment> data = new ArrayList<Fragment>();//定义list装载fragment
        BaseFragment fragmentA = new BaseFragment();//第一个fragment
        BaseFragment fragmentB = new BaseFragment();
        BaseFragment fragmentC = new BaseFragment();
        data.add(fragmentA);
        data.add(fragmentB);
        data.add(fragmentC);
        
        FragmentManager fm = getSupportFragmentManager();
        MyAdapter adapter = new MyAdapter(data,fm);
        viewpager.setAdapter(adapter);
        
        tablayout.setupWithViewPager(viewpager);//把viewpager和tablayout关联
        tablayout.getTabAt(0).setText("A");
        tablayout.getTabAt(1).setText("B");
        tablayout.getTabAt(2).setText("C");
    }
    //一个FragmentPagerAdapter,每个ViewPager页面都是Fragment
    class MyAdapter extends FragmentPagerAdapter{

        ArrayList<Fragment> data;
        public MyAdapter(ArrayList<Fragment> data,FragmentManager fm) {
            super(fm);
            this.data = data;
            Log.i("data size", data.size()+"");
        }
  

        @Override
        public Fragment getItem(int pos) {
            return data.get(pos);
        }

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

BaseFragment代码

public class BaseFragment extends Fragment {
    private RecyclerView mRecyclerView;
    public BaseFragment() {
    }

    @Override
    @Nullable
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_fragment, null);
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recycler);
        initRecyclerView();
        return view;
    }
    
    private void initRecyclerView() {
        String[] data = new String[]{"a","sss","aaa","dsfsdf","sdfsdfsd","dfsdfsf",
                "a","sss","aaa","dsfsdf","sdfsdfsd","dfsdfsf",
                "a","sss","aaa","dsfsdf","sdfsdfsd","dfsdfsf",
                "a","sss","aaa","dsfsdf","sdfsdfsd","dfsdfsf",
                "a","sss","aaa","dsfsdf","sdfsdfsd","dfsdfsf"
        };
        RecyclerAdapter adapter = new RecyclerAdapter(data);//创建RecyclerAdapter对象
        LinearLayoutManager layoutManager = new LinearLayoutManager(getContext());//
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);//为RecyclerView设置布局管理器
        mRecyclerView.setAdapter(adapter);
    }
}

layout_fragment代码

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

RecyclerAdapter 代码

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder>{
    
    private String[] data = null;//传经来的要显示数据
    
    public RecyclerAdapter(String[] data) {
        this.data = data;
    }
    
    class ViewHolder extends RecyclerView.ViewHolder {
        TextView tv_data;
        public ViewHolder(View view) {
            super(view);
            //找到控件id
            tv_data = (TextView) view.findViewById(R.id.tv_data);
        }
    }

    @Override
    public int getItemCount() {
        Log.e("data count", data.length+"");
        return data.length;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        //根据传入的holder,为viewholder设置数据
        String str = data[position];
        holder.tv_data.setText(str);
    }

    @Override
    public ViewHolder onCreateViewHolder(final ViewGroup parent, int position) {
        //返回一个viewholder,创建一个布局
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_recycler_item, parent,false);
        ViewHolder viewHolder = new ViewHolder(view);
        
        // 在此处注册点击事件,和Listview不同
        view.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View arg0) {
                Toast.makeText(parent.getContext(), "click", Toast.LENGTH_SHORT).show();
            }
        });
        return viewHolder;
    }
}

涉及到的layout_recycler_item代码

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="40dp"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_reclcler"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/tv_data"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="data"
        android:textSize="20sp"
        android:textColor="#000"
        />
    
</LinearLayout>