模仿QQ网购的二级分类页面

 

转载请注明地址：http://www.cnblogs.com/Lee1992/p/3647150.html

最近在公司实在闲得蛋疼，用扣扣网购的时候，发现他的二级分类展示效果不错，就随手模仿做出来一个。

没JB我说个图？

大概思路：

具体的我已经写成控件，这里重点说下调用的方法

package com.leeorz.expandablelayout;

import java.util.ArrayList;
import java.util.List;

import com.example.clickextendlistview.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

public class MainActivity6 extends Activity {

    
　　//数据源
    private String[] category = {"分类1","分类2","分类3","分类4","分类5","分类6","分类7"
            ,"分类8","分类9","分类10","分类11","分类12","分类13"
            ,"分类14","分类15","分类16","分类17","分类18","分类19"};
    
    private ExpandableLayout expandableLayout;
    private List<View> views = new ArrayList<View>();
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main6);
        
        initView();
        init();
    }
    
　　//实例化控件
    private void initView(){
        expandableLayout = (ExpandableLayout) this.findViewById(R.id.expandableLayout);
        expandableLayout.initConfig(MainActivity6.this);
        expandableLayout.setOnClickItemListener(mClickItemListener);//点击一级分类View时候的回调
        expandableLayout.setScrollDuration(600);//设置滑动的时间
    }
    
    private void init(){
        LayoutInflater mInflater = LayoutInflater.from(MainActivity6.this);
　　　　　　//创建一级分类的数据源（View）
        for(int i = 0; i<category.length;i++){
            View view = mInflater.inflate(R.layout.item, null);
            
            TextView tv = (TextView) view.findViewById(R.id.text);
            tv.setText(category[i]);
            tv.setTag(i);
            tv.setTextSize(30);
            views.add(view);
        }
        expandableLayout.setCategoryLayout(views);//将一级分类要显示的View设置进去
　　    }

    
　　//点击一级分类时候的回调函数
    public ExpandableLayout.OnClickItemListener mClickItemListener = new ExpandableLayout.OnClickItemListener() {
        
        @Override
        public void onClick(int index) {
            TextView tv = new TextView(MainActivity6.this);
            tv.setText("你点击了分类" + (index + 1));
            tv.setTextSize(40);
            expandableLayout.setHideView(tv);//设置二级分类，在实际开发的时候，具体的UI操作先在外部做好，再设置进该控件即可。
        }
    };
}

布局文件部分：

<?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" >
    <Button android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="我是来占屏幕的"/>

    <com.leeorz.expandablelayout.ExpandableLayout
        android:id="@+id/expandableLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </com.leeorz.expandablelayout.ExpandableLayout>

    <Button android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="我是来占屏幕的"/>
</LinearLayout>

核心部分：

ExpandableLayout.java

package com.leeorz.expandablelayout;

import java.util.ArrayList;
import java.util.List;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

import com.example.clickextendlistview.R;

@SuppressLint("NewApi")
public class ExpandableLayout extends LinearLayout implements OnClickListener{
    
    private Context mContext;
    private LayoutInflater mInflater;
    private View contentView;
    
    private String TASK = "ExpandableLayout_Task";

    private ScrollLayout mScrollLayout_top,mScrollLayout_bottom;
    private List<ItemView> layout = new ArrayList<ItemView>();
    
    private ScrollView sl_layout;
    
    private LinearLayout ll_hide_content;
    
    private OnClickItemListener mClickItemListener;
    private int windowHeight = 0;//屏幕的高度
//    private int scrollDuration = 500;
    
    private boolean topIsOpen = false;
    private boolean bottomIsOpen = false;
    
    private float scrollUpY = 0.0f;//向上滚动的高度
    private float scrollDownY = 0.0f;//向下滚动的高度
    
    private List<View> defaultViews = new ArrayList<View>();
    
    private ImageView iv_hide_image;
    
    public ExpandableLayout(Context context) {
        super(context);
        mContext = context;
        init();
        initView();
    }
    
    public ExpandableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
        initView();
    }
    public ExpandableLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        init();
        initView();
    }

    private void init(){
        mInflater = LayoutInflater.from(mContext);
        contentView = mInflater.inflate(R.layout.layout_expandable, this, true);
        
        
    }
    
    public void initConfig(Activity activity){
        DisplayMetrics metric = new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metric);
        windowHeight = metric.heightPixels;   // 屏幕高度（像素）
    }
    
    private void initView(){
        mScrollLayout_top = (ScrollLayout) contentView.findViewById(R.id.scrollView_top);
        mScrollLayout_top.setOnScrollListener(onTopScrollListener);
        
        mScrollLayout_bottom = (ScrollLayout) contentView.findViewById(R.id.scrollView_bottom);
        mScrollLayout_bottom.setOnScrollListener(onBottomScrollListener);
        
        sl_layout = (ScrollView) contentView.findViewById(R.id.sl_layout);
        
        
        ll_hide_content = (LinearLayout) contentView.findViewById(R.id.ll_hide_content);
    
        iv_hide_image = (ImageView) contentView.findViewById(R.id.iv_hide_image);
        iv_hide_image.setOnClickListener(this);
    }
    
    /**
     * 设置滑动时间
     */
    public void setScrollDuration(int duration){
//        scrollDuration = duration;
        mScrollLayout_bottom.setScrollDuration(duration);
        mScrollLayout_top.setScrollDuration(duration);
    }
    
    /**
     * 初始化ItemView
     */
    private void initItemView(){
        layout.clear();
        for(int i = 0;i<defaultViews.size();i++){

            ItemView item = new ItemView();
            item.setView(defaultViews.get(i));
            item.setState(ItemView.TOP);
            item.getView().setTag(i);
            item.getView().setOnClickListener(this);
            layout.add(item);
            mScrollLayout_top.addViewToEnd(layout.get(i).getView());//先全部加入top中
        }
    }
    
    /**
     * 添加分类layout
     */
    public void setCategoryLayout(List<View> list){
        defaultViews = list;
        initItemView();
    }
    
    private void setHideTitleBitmap(View view){
        
        iv_hide_image.setImageBitmap(ViewUtil.printScreen(view));
    }
    
    public void setOnClickItemListener(OnClickItemListener l){
        mClickItemListener = l;
    }
    
    /**
     * 设置隐藏页面的主要内容
     */
    public void setHideView(View view){
        ll_hide_content.removeAllViews();
        ll_hide_content.addView(view);
    }
    
    @Override
    public void onClick(View v) {
        //没有滑动完的话就返回
        if(mScrollLayout_bottom.isScroll & mScrollLayout_top.isScroll){
            return;
        }
        
        if(topIsOpen & bottomIsOpen){
            showCategoryView();
            close();    
        }else{
            if(v.getTag() == null){
                return;
            }
            int index = (Integer) v.getTag();
            open(index,v);
            setHideTitleBitmap(v);
            if(mClickItemListener != null){
                mClickItemListener.onClick(index);
            }
        }
    }
    
    /**
     * 关闭
     */
    private void close(){

        Log.d(TASK, "实际close的方法");
            scrollToBottom(mScrollLayout_top,scrollUpY * -1);
            scrollToTop(mScrollLayout_bottom,scrollDownY);
    }
    
    /**
     * 打开
     * @param index
     * @param v
     */
    private void open(int index,View v){
            transposition(index);
            
            getScrollY(v);
            
            Log.d(TASK, "实际open的方法");
            
            scrollToTop(mScrollLayout_top,scrollUpY);
            scrollToBottom(mScrollLayout_bottom,scrollDownY * -1);
    }
    
    /**
     * 换位
     */
    private void transposition(int index){

        if(layout.get(index).getState() == ItemView.TOP){//点击了上半部分的item
            for(int i = 0;i<layout.size();i++){
                if(i>index){
                    if(layout.get(i).getState() == ItemView.TOP){
                        layout.get(i).setState(ItemView.BOTTOM);
                    }    
                }
            }            
        }else if(layout.get(index).getState() == ItemView.BOTTOM){//点击了下半部分的item
            for(int i = 0;i<layout.size();i++){
                if(i<=index){
                    if(layout.get(i).getState() == ItemView.BOTTOM){
                        layout.get(i).setState(ItemView.TOP);
                    }
                }
            }
        }

        mScrollLayout_top.clearAllView();
        mScrollLayout_bottom.clearAllView();
        
        for(int i = 0;i<layout.size();i++){
            if(layout.get(i).getState() == ItemView.TOP){
                mScrollLayout_top.addViewToEnd(layout.get(i).getView());
            }else if(layout.get(i).getState() == ItemView.BOTTOM){

                mScrollLayout_bottom.addViewToEnd(layout.get(i).getView());
            }
        }
    }
    
    private ScrollLayout.OnScrollListener onBottomScrollListener = new ScrollLayout.OnScrollListener() {
        
        @Override
        public void onEnd() {
            if(mScrollLayout_bottom.isScroll){
                bottomIsOpen = !bottomIsOpen;
            }
            
        }
    };
    
    private ScrollLayout.OnScrollListener onTopScrollListener = new ScrollLayout.OnScrollListener() {
        
        @Override
        public void onEnd() {
            if(mScrollLayout_top.isScroll){
                if(!topIsOpen){
                    hideCategoryView();
                }
                topIsOpen = !topIsOpen;
            }
        }
    };
    
    private void hideCategoryView(){
        sl_layout.setVisibility(View.GONE);
    }
    
    private void showCategoryView(){
        sl_layout.setVisibility(View.VISIBLE);
    }
    
    /**
     * 分开
     */
    public void scrollToTop(ScrollLayout v,float y){
        v.setScrollY(0,y);
        v.startScroll();
    }
    
    /**
     * 关闭
     */
    public void scrollToBottom(ScrollLayout v,float y){
        v.setScrollY(0,y);
        v.startScroll();
        
    }
    

    /**
     * 获取view在屏幕中的Y轴值
     * @param view
     * @return
     */
    @SuppressLint("NewApi")
    private void getScrollY(View view){
        
        int index = (Integer) view.getTag();
        //总高度
        int scrollHeight = sl_layout.getScrollY();
        int viewHeight = index * view.getHeight();
        scrollUpY = viewHeight - scrollHeight;
        scrollDownY = windowHeight - scrollUpY;
        
    }
    
    /**
     * 设置点击事件的回调
     */
    public interface OnClickItemListener{
        public void onClick(int index);
    }
}

ScrollLayout.java

package com.leeorz.expandablelayout;

import java.util.ArrayList;
import java.util.List;

import com.example.clickextendlistview.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.provider.Settings.System;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Scroller;

public class ScrollLayout extends LinearLayout {

    private Scroller mScroller;
    private float fromY;
    private float toY;
    private Context mContext;
    private View contentView;
    private LinearLayout ll_root;
    private LayoutInflater mInflater;
    
    private OnScrollListener mOnScrollListener;
    
    public boolean isScroll = false;
    private List<View> views = new ArrayList<View>();
    
    private int scrollDuration = 600;//滑动时间
    
    public ScrollLayout(Context context) {
        super(context);
        mContext = context;
        init();
    }
    
    public ScrollLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }
    
    @SuppressLint("NewApi")
    public ScrollLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        init();
    }

    private void init(){
        mScroller = new Scroller(mContext);
        mInflater = LayoutInflater.from(mContext);
        contentView = mInflater.inflate(R.layout.layout_scroll, this,true);
        ll_root = (LinearLayout) contentView.findViewById(R.id.ll_root);
    }
    
    public View getLastView(){
        return views.get(views.size() - 1);
    }
    
    public void addViewToFirst(View v){
        ll_root.addView(v, 0);
        views.add(0, v);
    }
    
    public void addViewToEnd(View v){
        ll_root.addView(v);
        views.add(v);
    }
    
    public void clearAllView(){
        for(View v : views){
            ll_root.removeView(v);
        }
        views.clear();
    }
    
    /**
     * 移除第一个子View
     */
    public void removeFirstView(){
        ll_root.removeView(views.get(0));
        views.remove(0);
    }

    /**
     * 移除最后一个子View
     */
    public void removeLastView(){
        ll_root.removeView(views.get(views.size() - 1));
        views.remove(views.size() - 1);
    }
    
    public int getItemCount(){
        return views.size();
    }
    
    public void setScrollDuration(int duration){
        this.scrollDuration = duration;
    }
    
    public void setScrollY(float fromY,float toY){
        this.fromY = fromY;
        this.toY = toY;        
        
    }
    
    public void setOnScrollListener(OnScrollListener l){
        this.mOnScrollListener = l;
    }
    
    private long starScrollTime = 0;
    @SuppressLint("NewApi")
    public void startScroll(){
//        Log.d("toY Value", ""+toY);
        mScroller.startScroll(mScroller.getCurrX(), mScroller.getCurrY(), 0, (int)toY,scrollDuration);
        isScroll = true;
        starScrollTime = java.lang.System.currentTimeMillis();
        invalidate();
    }
    
    @SuppressLint("NewApi")
    @Override
    public void computeScroll() {
        //先判断mScroller滚动是否完成  
        if (mScroller.computeScrollOffset()) {  
          
            //这里调用View的scrollTo()完成实际的滚动  
            contentView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            //必须调用该方法，否则不一定能看到滚动效果  
            postInvalidate();  
        }else if(!mScroller.computeScrollOffset()){
            if(mOnScrollListener != null || isScroll){
                if(java.lang.System.currentTimeMillis() - starScrollTime >= scrollDuration){
                    mOnScrollListener.onEnd();
                    isScroll = false;                   
                }
            }
        }
        super.computeScroll();  
    }
    
    /**
     * 完成动画之后的回调接口
     */
    public interface OnScrollListener{
        public void onEnd();
    }
}

ViewUtil.java 用于控件截图

package com.leeorz.expandablelayout;

import java.io.ByteArrayOutputStream;

import android.graphics.Bitmap;
import android.view.View;

public class ViewUtil {

    /**
     * 对控件截图。
     * @param v 需要进行截图的控件。
     *            
     * @param quality 图片的质量
     *           
     * @return 该控件截图的byte数组对象。
     */
    public static byte[] printScreen(View v, int quality) {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        v.setDrawingCacheEnabled(true);
        v.buildDrawingCache(true);
        Bitmap bitmap = v.getDrawingCache();
        bitmap.compress(Bitmap.CompressFormat.JPEG, quality, baos);
        return baos.toByteArray();
    }
    /**
     * 对控件截图。
     *
     * @param v 需要进行截图的控件
     *            
     * @return 该控件截图的Bitmap对象。
     */
    public static Bitmap printScreen(View v) {
        v.setDrawingCacheEnabled(true);
        v.buildDrawingCache();
        return v.getDrawingCache();
    }

}

ItemView.java

package com.leeorz.expandablelayout;

import android.view.View;

public class ItemView  {

    public final static int TOP = 1;
    public final static int BOTTOM = 2;
    
    private View view;
    private int state = TOP;
    
    public View getView() {
        return view;
    }
    public void setView(View view) {
        this.view = view;
    }
    public int getState() {
        return state;
    }
    public void setState(int state) {
        this.state = state;
    }
}

 源码下载