Android UI设计: 仿QQ好友列表分组悬停,自定义Header,下拉刷新结合Demo

之前学习了Pulltorefresh,pinnedheaderexpanablelistview 但是结合起来还是有点麻烦的。尤其是像QQ这种。他不是单纯的第一个当做分组。他是分组上面还有几个按钮,还有搜索框,同时可以滑动,而且还可以悬停。想了试了好几种方法,都有BUG。最后用的一种方法。

1. pulltorefresh用的android.v4里面自带的,好像知乎也是

2. 悬停和分组用的网上的,然后我把第一个分组的样式改成了自定义的menu菜单,并且清空了child.这样看上去就像一个自定义layout和listview一起滑动。

3. 下面是样式图

整个部分是可以滑动的。

下拉刷新之后 最上面会有一个彩色带。有点细。这是系统弄的效果

这是悬停效果,之前的自定义菜单被滑动上去了。

下面是核心代码,非常简洁

package com.android.activity;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.Toast;

import com.android.R;
import com.android.pinnedheader.PinnedHeaderExpandableListView;

public class MainActivity extends Activity{
    private PinnedHeaderExpandableListView explistview;
    private SwipeRefreshLayout swipeRefreshLayout;
    private String[][] childrenData = new String[10][10];
    private String[] groupData = new String[5];
    private int expandFlag = -1;//控制列表的展开
    private MainAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        initView();
        initData();
    }

    /**
     * 初始化VIEW
     */
    private void initView() {
        explistview = (PinnedHeaderExpandableListView)findViewById(R.id.explistview);
        swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swipe_container);
        //设置刷新时动画的颜色,可以设置4个
        swipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light, android.R.color.holo_orange_light, android.R.color.holo_green_light);
        swipeRefreshLayout.setOnRefreshListener(new OnRefreshListener() {

                      @Override
                      public void onRefresh() {
                         new Handler().postDelayed(new Runnable() {

                             @Override
                             public void run() {
                                 swipeRefreshLayout.setRefreshing(false);
                             }
                         }, 6000);
                     }
                 });
    }

    /**
     * 初始化数据
     */
    private void initData() {
        for(int i=0;i<5;i++){
            groupData[i] = " group "+i;
        }
        for(int i=1;i<5;i++){
            for(int j=0;j<10;j++){
                childrenData[i][j] = "qq "+j;
            }
        }
        //设置悬浮头部VIEW
        explistview.setHeaderView(View.inflate(MainActivity.this,R.layout.group,
                null));
        adapter = new MainAdapter(childrenData, groupData, getApplicationContext(),explistview);
        explistview.setAdapter(adapter);
        explistview.setOnChildClickListener(new OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v,
                    int groupPosition, int childPosition, long id) {
                Toast.makeText(MainActivity.this, "分组:"+groupData[groupPosition]+",好友:"+childrenData[groupPosition][childPosition], Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }
}

你需要做的就是设置监听器和传数据,记住数据第一组不会显示的,而且child必须为0个。

菜单样式和分组样式在这里getview设置。

package com.android.activity;

import com.android.R;
import com.android.pinnedheader.PinnedHeaderExpandableListView;

import android.content.Context;
import android.opengl.Visibility;
import android.util.SparseIntArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.AbsListView.LayoutParams;
import android.widget.Toast;

public class MainAdapter extends  BaseExpandableListAdapter {
    private String[][] childrenData;
    public String[] groupData;
    private Context context;
    private PinnedHeaderExpandableListView listView;
    private LayoutInflater inflater;

    public MainAdapter(String[][] childrenData,String[] groupData
            ,Context context,PinnedHeaderExpandableListView listView){
        this.groupData = groupData;
        this.childrenData = childrenData;
        this.context = context;
        this.listView = listView;
        inflater = LayoutInflater.from(this.context);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return childrenData[groupPosition][childPosition];
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return 0;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition,
            boolean isLastChild, View convertView, ViewGroup parent) {
        View view = null;
        if (convertView != null) {
            view = convertView;
        } else {
            view = inflater.inflate(R.layout.child, null);
        }
        TextView text = (TextView)view.findViewById(R.id.childto);
        text.setText(childrenData[groupPosition][childPosition]);
        return view;
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        if(groupPosition<0)
            return 0;
        return childrenData[groupPosition].length;
    }

    @Override
    public Object getGroup(int groupPosition) {
        return groupData[groupPosition];
    }

    @Override
    public int getGroupCount() {
        return groupData.length;
    }

    @Override
    public long getGroupId(int groupPosition) {
        return 0;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
            View convertView, ViewGroup parent) {
        View view = null;
        //menu
        if(groupPosition==0)
        {
            view = inflater.inflate(R.layout.menu, null);
            view.setLayoutParams(new LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, 80));
            view.setTag(1);
            TextView btn1=(TextView)view.findViewById(R.id.btn1);
            btn1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "特别关心", Toast.LENGTH_SHORT).show();
                }
            });
            return view;
        }
        //普通分组
        if (convertView != null&&(Integer)convertView.getTag()==0)
        {
            view = convertView;
        } else {
            view = inflater.inflate(R.layout.group, null);
            view.setTag(0);
        }
        TextView text = (TextView)view.findViewById(R.id.groupto);
        if (isExpanded) {
            text.setText("- "+groupData[groupPosition]);
        }
        else{
            text.setText("+ "+groupData[groupPosition]);
        }
        return view;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

}

是不是很少,需要自己改的代码就这两个文件。

工程在这里:我的github地址

戳戳戳:https://github.com/younfor/PinnedAndPulledHeaderListView

时间: 2024-10-02 07:22:20

Android UI设计: 仿QQ好友列表分组悬停,自定义Header,下拉刷新结合Demo的相关文章

Android UI视图效果篇之仿QQ好友列表分组悬浮PinnedHeaderExpandableListView

楼主是在平板上測试的.图片略微有点大,大家看看效果就好 接下来贴源代码: PinnedHeaderExpandableListView.java 要注意的是 在 onGroupClick方法中parent.setSelectedGroup(groupPosition)这句代码的作用是点击分组置顶, 我这边不须要这个效果.QQ也没实用到,所以给凝视了.大家假设须要能够解开凝视 package com.xiaos.view; import android.content.Context; impor

Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

经过一个星期的折腾,终于做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这只是一个单独聊天表情的输入,以及聊天的效果实现.因为我没有写服务器,所以没有双方聊天的效果.主要是聊天中表情的选择,发送.表情翻页带有不同的效果.我在主要代码中都写了注释.下面看代码实现.附上本文源码,代码较多. 下载地址:点击 一.先看实现的效果图 二.调用接口以及设置MainActivity package com.example.activity; import java.util.Arra

Android自定义ListView下拉刷新

实现的目标是本地有数据并没有刷新.下拉数据及时刷新数据. 我在网上找了某位写的MyListView,这个东西的下拉核心部分还是没有弄明白.非常感谢这位作者. XML布局文件源代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

Qt qml中listview 列表视图控件(下拉刷新.上拉分页.滚动轴) 来源 https://www.cnblogs.com/surfsky/p/4352898.html 设置ListView涉及到将contentsY,即视图的可见部分的顶部,设置y为委托的值.另一个更改是interactive将视图设置为false.这样可以防止视图移动.用户不能再滚动列表或更改当前Item. contentY为列表上拉后列表左上角点距显示框左上解点的高度listView1.height为可显示部分的高度,

UI基础--UITableView实现仿QQ好友列表页面

需求:类似于QQ好友列表页面的显示,有好友分组,有好友数量,在线人数,vip会员.展开分组时显示分组好友,合并分组时不显示:具体效果图如下: 分析: 1.展开分组时显示分组好友,该功能可以使用显示UITableViewCell的数据即可: 2.分组头可以考虑使用一个headerView来实现: 示例文件结构: 具体实现步骤: 1.自定义数据模型类,由于plist文件中包含了2个字典,所以需要写2个数据模型: 2.自定义cell,属性包括数据模型以及生成可重用cell的方法,由于系统自带的子控件即

ExpandableListView仿QQ好友列表

本例中,对ExpandableListView中的数据进行了封装,分为两个JavaBean,一个为Group类表示组信息,一个Child类表示该组下子列表信息: Group: public class Group { private String groupName;//分组名 private List<Child> childList;//该分组写子列表 public String getGroupName() { return groupName; } public void setGro

仿QQ好友列表界面的实现

TableView有2种style:UITableViewStylePlain 和 UITableViewStyleGrouped. 但是QQ好友列表的tableView给人的感觉似乎是2个style效果都有,但是tableView不能实现2种效果同时存在. 其实只是用到了Plain这个style,只是在cell的个数显示上做了个处理(个人见解,希望可以帮到有需要的人.....) 当通讯录那一组的cell的组头视图中的button是普通状态下的时候,并不是不显示cell,而是显示一个没有任何内容

仿qq好友列表

模仿qq好友列表布局,可收缩.展开 下载地址:http://www.devstore.cn/code/info/940.html 运行截图:   

Android UI设计: 仿ios,仿qq实现Listview侧滑出现按钮

老规矩先看效果图: 这个代码很常见,网上大牛已经做过好几遍了,但是本着学习的态度,去研究了下别人写的代码.发现有好几种实现方法.最为流行的一种是使用Scroller实现滑动,然后按钮的实现有三种方法. 1. 一种是全部用java类继承一个viewgroup来动态生成listviewitem.这样灵活性很高,但是技巧性也高. 2. 一种是整个listviewitem用xml编写,然后inflate进去.这样写的好处是可以复用,而且只需要adapter重写view, 但是按钮和内容是固定的,不能轻松