Android之TabLayout+抽屉式效果和RecyclerView的使用

大神就别喷我了，有不懂得可以学习一下哦。。。

-----------------转载请注明出处：http://blog.csdn.net/android_cll

---------------在build.gradle文件下加上这个包

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

1.先看效果图，这是一个抽屉式功能..



2.这个是导航栏TabLayout+recyclerView的一个功能.



3.主要功能实现

build.gradle文件下加上这个包、

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

（1）导航栏和下面的滑动实现很简单，就是一个TabLayout和ViewPager的实现。

<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="49dp"
android:background="#ffffff">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:text="贵阳市"
android:textColor="#676767"
android:textSize="16dp" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/chaoshi_nav_logo" />

<ImageView
android:id="@+id/imggenduo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/chaoshi_nav_more_change_icon" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="-20dp"
android:layout_toLeftOf="@+id/imggenduo"
android:src="@drawable/chaoshi_nav_shopping_icon" />
</RelativeLayout>

<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#e9e9e9" />

<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#f2f2f2" />

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#272727"
android:background="#ffffff"
app:tabSelectedTextColor="#e32b28"
app:tabMode="scrollable" />

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

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

package com.liaoinstan.apphomerecyclerview.home;

import android.content.res.ColorStateList;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
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.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;

import com.liaoinstan.apphomerecyclerview.R;
import com.liaoinstan.apphomerecyclerview.nestrecycle.RecycleFragment;
import com.liaoinstan.apphomerecyclerview.onerecycle.OneRecycleFragment;
import com.liaoinstan.apphomerecyclerview.twowayrecycle.TwowayRecycleFragment;

import java.util.LinkedList;
import java.util.List;

public class RecyleActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recyle);
initBase();
}

private void initBase() {

ViewPager pager = (ViewPager) findViewById(R.id.pager);
final MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new RecycleFragment().newInstance(), "全部商品");
adapter.addFragment(new OneRecycleFragment().newInstance(), "首页");
adapter.addFragment(new TwowayRecycleFragment().newInstance(), "本地超市");
String cll[]={"本周热卖", "爆款热卖", "热门推荐", "粮油米面", "休闲零食", "身体补品"};
for(int i=0;i<cll.length;i++){
adapter.addFragment(new TwowayRecycleFragment().newInstance(), cll[i]);
}
pager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(pager);
}

private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragments = new LinkedList<>();
private List<String> mTitles = new LinkedList<>();

public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}

public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mTitles.add(title);
}

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

@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}

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

（2）.抽屉式功能的实现

2.1：XML

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f3f6f6"
android:orientation="horizontal">

<ListView
android:id="@+id/left_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="23"
android:background="#f3f6f6"
android:scrollbars="none">

</ListView>

<ListView
android:id="@+id/pinnedListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="9"
android:background="#f3f6f6"
android:scrollbars="none">

</ListView>

</LinearLayout>

2.2：主Fragment

package com.liaoinstan.apphomerecyclerview.nestrecycle;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.SwipeRefreshLayout;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

import com.liaoinstan.apphomerecyclerview.R;
import com.liaoinstan.apphomerecyclerview.text.TestSectionedAdapter;
import com.liaoinstan.apphomerecyclerview.twowayrecycle.TwowayRecycleAdapter;

import org.lucasr.twowayview.widget.TwoWayView;

import java.util.ArrayList;
import java.util.HashMap;

public class RecycleFragment extends Fragment {
private View rootView = null;//缓存Fragment view

public static RecycleFragment newInstance() {
RecycleFragment f = new RecycleFragment();
return f;
}

private boolean isScroll = true;
private ListView left_listView;
private String[] leftStr = new String[]{"热销", "休闲", "运动", "火锅", "冷食", "老人", "水果", "日用品"};
private String[][] rightStr = new String[][]{
{"热销衣服", "热销裤子", "热销零食"}, {"休闲裤", "休闲衣服", "休闲鞋"},
{"运动鞋", "运动衣", "运动裤"}, {"桥洞火锅", "四川火锅", "桥下火锅"},
{"冰淇淋", "冰棍", "雪糕"}, {"老人保暖衣", "老人保暖裤", "老人帽子"},
{"荔枝", "苹果", "香蕉", "橘子"}, {"锅", "铲子", "筷子", "碗"}};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
rootView = inflater.inflate(R.layout.activity_mainyi, container, false);
final ListView right_listview = (ListView) rootView.findViewById(R.id.pinnedListView);
final TestSectionedAdapter sectionedAdapter = new TestSectionedAdapter(getActivity(), leftStr, rightStr);
right_listview.setAdapter(sectionedAdapter);

left_listView = (ListView) rootView.findViewById(R.id.left_listview);
//生成动态数组，加入数据
ArrayList<HashMap<String, Object>> listItem = new ArrayList<HashMap<String, Object>>();
for (int i = 0; i < leftStr.length; i++) {
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemText", leftStr[i]);
listItem.add(map);
}
// 生成适配器的Item和动态数组对应的元素
SimpleAdapter listItemAdapter = new SimpleAdapter(getActivity(), listItem,// 数据源
R.layout.item_layout,// ListItem的XML实现
// 动态数组与ImageItem对应的子项
new String[]{"ItemText"},
// ImageItem的XML文件里面的一个TextView
new int[]{R.id.item});

//添加并且显示
left_listView.setAdapter(listItemAdapter);

left_listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View view, int position,
long arg3) {
isScroll = false;

for (int i = 0; i < left_listView.getChildCount(); i++) {
if (i == position) {
left_listView.getChildAt(i).setBackgroundColor(Color.parseColor("#ffffff"));

} else {
left_listView.getChildAt(i).setBackgroundColor(Color.parseColor("#f3f6f6"));
}
}

int rightSection = 0;
for (int i = 0; i < position; i++) {
rightSection += sectionedAdapter.getCountForSection(i) + 1;
}
right_listview.setSelection(rightSection);

}

});

right_listview.setOnScrollListener(new AbsListView.OnScrollListener() {

@Override
public void onScrollStateChanged(AbsListView arg0, int arg1) {

}

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
if (isScroll) {
for (int i = 0; i < left_listView.getChildCount(); i++) {

if (i == sectionedAdapter.getSectionForPosition(firstVisibleItem)) {
left_listView.getChildAt(i).setBackgroundColor(Color.parseColor("#ffffff"));
} else {
left_listView.getChildAt(i).setBackgroundColor(Color.parseColor("#f3f6f6"));

}
}

} else {
isScroll = true;
}
}
});
return rootView;
}

}

2.3：适配器

package com.liaoinstan.apphomerecyclerview.text;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.liaoinstan.apphomerecyclerview.R;
import com.liaoinstan.apphomerecyclerview.text.SectionedBaseAdapter;

public class TestSectionedAdapter extends SectionedBaseAdapter{

private Context mContext;
private String[] leftStr;
private String[][] rightStr;

public TestSectionedAdapter(Context context, String[] leftStr, String[][] rightStr){
this.mContext = context;
this.leftStr = leftStr;
this.rightStr = rightStr;
}

@Override
public Object getItem(int section, int position) {
return rightStr[section][position];
}

@Override
public long getItemId(int section, int position) {
return position;
}

@Override
public int getSectionCount() {
return leftStr.length;
}

@Override
public int getCountForSection(int section) {
return rightStr[section].length;
}

@Override
public View getItemView(final int section, final int position, View convertView, ViewGroup parent) {
RelativeLayout layout = null;
if (convertView == null) {
LayoutInflater inflator = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layout = (RelativeLayout) inflator.inflate(R.layout.list_item, null);
} else {
layout = (RelativeLayout) convertView;
}
((TextView) layout.findViewById(R.id.textItem)).setText(rightStr[section][position]);
layout.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Toast.makeText(mContext, rightStr[section][position], Toast.LENGTH_SHORT).show();
}
});
return layout;
}

@Override
public View getSectionHeaderView(int section, View convertView, ViewGroup parent) {
LinearLayout layout = null;
if (convertView == null) {
LayoutInflater inflator = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layout = (LinearLayout) inflator.inflate(R.layout.header_item, null);
} else {
layout = (LinearLayout) convertView;
}
layout.setClickable(false);
((TextView) layout.findViewById(R.id.textItem)).setText(leftStr[section]);
return layout;
}

}

2.4：两个item

<?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"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:background="#ffffff"
android:orientation="horizontal">

<ImageView
android:id="@+id/imgnl"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:layout_marginLeft="10dp"
android:src="@drawable/nl" />

<TextView
android:id="@+id/textItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_toRightOf="@+id/imgnl"
android:text="哈哈"
android:textColor="#262626"
android:textSize="14dp" />

<TextView
android:id="@+id/jiage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textItem"
android:layout_marginTop="5dp"
android:layout_toRightOf="@+id/imgnl"
android:text="￥3.5"
android:textColor="#e92c24"
android:textStyle="bold" />

<TextView
android:id="@+id/xiaoliang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/jiage"
android:layout_marginTop="5dp"
android:textSize="12dp"
android:textColor="#999999"
android:layout_toRightOf="@+id/imgnl"
android:text="销量:236" />

<ImageView
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_below="@+id/jiage"
android:layout_marginBottom="15dp"
android:src="@drawable/chaoshi_shopingjia_icon" />
</RelativeLayout>

<?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="31dp"
android:background="#f8f8f8"
android:orientation="horizontal">

<TextView
android:id="@+id/textItem"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:text="呵呵"
android:textSize="14dp"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:textColor="#666666" />
</LinearLayout>