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

 

一：效果图，这是一个抽屉式功能，这个是导航栏TabLayout+recyclerView的一个功能...

 

 

二：实现步骤

1：build.gradle文件下加上这个包

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

2：导航栏和下面的滑动实现很简单，就是一个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();
        }
    }
}

3：抽屉式功能的实现

 

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>