转载请注明出处:http://blog.csdn.net/hello_chillax/article/details/45599215,谢谢~
想必大家都用过360手机助手,效果是不是很绚丽,其实很好实现喽。今天就来说一说怎么去实现喽~(PS:咱们是讲原理和思路,我这里是用的不是360助手的界面,懒得去扒那些图片喽,太懒,见谅~~)
首先,上图:
先看一下工程目录结构:
其中有两个包,第一个里面分别是:
Data:工程里面的数据,本来想用几个textview填充ListView的,最后感觉这样会效果好一点,米啥用~
MainActivity:不说了~
Model:LIstView的每个item我都抽象出一个model,
RollViewPager:大家也看到了,上面的那个ViewPager是会自己跳动的,为了实现这个效果,这里重写了ViewPager。
另外一个包则是下拉刷新,上拉加载的ListView,是一个开源的东东~GitHub上有~
这里重点说一下整个效果的思路:
其实PullToRefreshListView内部维护了一个普通的ListView,并且实现了上拉加载,下拉刷新效果。然后我们在此基础之上加了一个自动翻滚的ViewPager,就实现了上面的效果。
代码:
MainActivity.java:
//初始化View
private void initView() {
ptrLV = (PullToRefreshListView) findViewById(R.id.ptr_lv);
// 滚动到底自动加载可用
ptrLV.setPullRefreshEnabled(true);
// 下拉刷新可用
ptrLV.setPullLoadEnabled(false);
// 滚动到底自动加载可用
ptrLV.setScrollLoadEnabled(true);
// 得到实际的ListView并设置监听器:
ptrLV.getRefreshableView().setOnItemClickListener(
new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
Toast.makeText(MainActivity.this,
"您点击的是第 " + position + " 个条目~",
Toast.LENGTH_SHORT).show();
}
});
// 自定义adapter:
ptrLV.getRefreshableView().setAdapter(new MyAdapter());
// 获取header的一个视图:
topView = (ViewGroup) getLayoutInflater().inflate(
R.layout.layout_roll_view, null);
// 设置圆点:
dotsView = (LinearLayout) topView.findViewById(R.id.dots_ll);
initDot(4);
// 设置ListView的Header
viewPager = new RollViewPager(this, dotList, R.drawable.dot_focus,
R.drawable.dot_normal, new OnPagerClickCallback() {
@Override
public void onPagerClick(int position) {
Toast.makeText(MainActivity.this,
"您点击的是第 " + (position+1) + " 张图片~",
Toast.LENGTH_SHORT).show();
}
});
// 设置图片的路径
int[] ids = new int[] { R.drawable.news_1, R.drawable.news_2,
R.drawable.news_3, R.drawable.news_4 };
viewPager.setResImageIds(ids);
// 设置图片的标题
ArrayList<String> list = new ArrayList<String>();
list.add("我是第1标题~~");
list.add("我是第2标题~~");
list.add("我是第3标题~~");
list.add("我是第4标题~~");
viewPager.setTitle(
(TextView) topView.findViewById(R.id.top_news_title), list);
// 设置ViewPager开始转动
viewPager.startRoll();
pagerLy = (LinearLayout) topView.findViewById(R.id.top_news_viewpager);
pagerLy.removeAllViews();
pagerLy.addView(viewPager);
// 添加header
if (ptrLV.getRefreshableView().getHeaderViewsCount() < 1) {
ptrLV.getRefreshableView().addHeaderView(topView);
}
}
private void initDot(int size) {
dotList = new ArrayList<View>();
for (int i = 0; i < size; i++) {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
10, 10);
params.setMargins(5, 0, 5, 0);
View dot = new View(this);
if (i == 0) {
dot.setBackgroundResource(R.drawable.dot_focus);
} else {
dot.setBackgroundResource(R.drawable.dot_normal);
}
dot.setLayoutParams(params);
dotList.add(dot);
dotsView.addView(dot);
}
}
class MyAdapter extends BaseAdapter {
@Override
public int getCount() {
return dataList.size();
}
@Override
public Object getItem(int position) {
return dataList.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = new ViewHolder();
if (convertView == null) {
convertView = getLayoutInflater().inflate(
R.layout.list_item_stytle, null);
convertView.setTag(holder);
holder.user_image = (ImageView) convertView
.findViewById(R.id.user_image);
holder.publish_user = (TextView) convertView
.findViewById(R.id.publish_user);
holder.publish_at = (TextView) convertView
.findViewById(R.id.publish_at);
holder.title = (TextView) convertView.findViewById(R.id.title);
holder.body = (TextView) convertView.findViewById(R.id.body);
holder.mark = (TextView) convertView.findViewById(R.id.mark);
} else {
holder = (ViewHolder) convertView.getTag();
}
Model post = dataList.get(position);
holder.user_image.setImageResource(post.image_path);
holder.publish_user.setText(post.publish_user);
holder.publish_at.setText(post.publish_at);
holder.mark.setText(post.mark);
holder.title.setText(post.title);
holder.body.setText(post.body);
return convertView;
}
}
public final class ViewHolder {
public ImageView user_image;
public TextView publish_user;
public TextView publish_at;
public TextView mark;
public TextView title;
public TextView body;
}
主要的布局:
<com.qianlong.android.view.pullrefreshview.PullToRefreshListView
android:id="@+id/ptr_lv"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
恩 简单~
其实不难喽,还是不懂的可以参考本例的代码,我会给出Demo的下载地址
Demo地址:http://download.csdn.net/detail/hello_chillax/8686921
写得比较简单,不懂的地方请留言~