有很多人在使用listview的时候都不知道如何将一个控件布局或者添加到listview的上方,实现listview滑动时,头部会有一个view跟随者上下移动,在这里我写了一个案例,
这个案例大体就是在头部加了个viewpager实现轮播图的同时,绑定listview,
大家在添加头的时候需要注意的一点就是,如果要添加,请添加布局,不要单独的将控件添加进去,那样后期会非常被动,
这里只做了头部的,还有底部的和头部类似,只是需要listview.addFllow(),方法不同,自然效果不同。
首先,先展示效果:
如图:因为使用的轮播图样式,所以图片不一致,大体细节不在描述,重在技术核心listView.addhead
在这里我使用了网络获取轮播图片,如果不需要网络获取,忽略掉LoadData()方法;
将listview添加一个头,但是注意布局,
大家看代码吧,如果有不懂得可以问我,,牢记两个方法:
listView.addHeaderView(headerView),
listView.addFooterView(footerView);
代码如下:
1,Main方法中:
package com.yz.myviewpagertest; import android.os.Handler; import android.os.Message; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.LayoutInflater; import android.view.View; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView; import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; import com.squareup.okhttp.OkHttpClient; import com.squareup.picasso.Picasso; import com.yz.myviewpagertest.helper.JsonHelper; import com.yz.myviewpagertest.helper.OkHttpClientHelper; import java.io.IOException; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { public static final String PATH = "http://dailyapi.ibaozou.com/api/v31/documents/latest"; private ViewPager viewPager_main; private List<BaozouBean.TopStoriesBean> top_stories = new ArrayList<>(); private List<ImageView> imageV_list = new ArrayList<>(); private MyPagerAdatper adapter; private List<ImageView> dot_list = new ArrayList<>(); private LinearLayout lin; private int position = 0; private ListView list_view_main; private ArrayAdapter<String> arr_adapter; private String[] str = {"呵呵", "和蔼", "中国", "呵呵", "和蔼", "中国", "呵呵", "和蔼", "中国", "呵呵", "和蔼", "中国"}; private Handler handle = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); switch (msg.what) { case 1: reset(); dot_list.get(position).setImageResource(R.mipmap.social_page_indicator_selected); viewPager_main.setCurrentItem(position); position++; if (position >= dot_list.size()) { position = 0; } handle.sendEmptyMessageDelayed(1, 2000); break; } } }; private void reset() { for (ImageView dot : dot_list ) { dot.setImageResource(R.mipmap.social_page_indicator); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); LoadData(); } private void LoadData() { new Thread(new Runnable() { @Override public void run() { try { String json_str = OkHttpClientHelper.getStringFromURL(MainActivity.this, PATH, "path_photo"); BaozouBean baozouBean = new Gson().fromJson(json_str, new TypeToken<BaozouBean>() { }.getType()); top_stories = baozouBean.getTop_stories(); runOnUiThread(new Runnable() { @Override public void run() { //将数据源进行填充 for (BaozouBean.TopStoriesBean top_bean : top_stories ) { //填充图片 ImageView imageV = new ImageView(MainActivity.this); Picasso.with(MainActivity.this).load(top_bean.getImage()).into(imageV); imageV_list.add(imageV); //填充点的个数; ImageView image_dot = new ImageView(MainActivity.this); image_dot.setImageResource(R.mipmap.social_page_indicator); image_dot.setClickable(true); lin.addView(image_dot); dot_list.add(image_dot); } adapter.notifyDataSetChanged(); handle.sendEmptyMessage(1); } }); } catch (IOException e) { e.printStackTrace(); } } }).start(); } private void initView() { View head_view = LayoutInflater.from(this).inflate(R.layout.viewpager_headforlistview, null); list_view_main = (ListView) findViewById(R.id.listview_main); lin = (LinearLayout) head_view.findViewById(R.id.lin); viewPager_main = (ViewPager) head_view.findViewById(R.id.viewpager_main); adapter = new MyPagerAdatper(top_stories, this, imageV_list); viewPager_main.setAdapter(adapter); list_view_main.addHeaderView(head_view); arr_adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, str); list_view_main.setAdapter(arr_adapter); } }
2,轮播图适配器:
package com.yz.myviewpagertest; import android.content.Context; import android.support.v4.view.LayoutInflaterCompat; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import com.squareup.picasso.Picasso; import java.util.ArrayList; import java.util.List; /** * Created by Administrator on 2016/11/5. */ public class MyPagerAdatper extends PagerAdapter { private List<BaozouBean.TopStoriesBean> top_stories; private Context context; private List<ImageView> imageV_list; public MyPagerAdatper(List<BaozouBean.TopStoriesBean> top_stories, Context context, List<ImageView> imageV_list) { this.top_stories = top_stories; this.context = context; this.imageV_list = imageV_list; } @Override public int getCount() { return imageV_list.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = imageV_list.get(position); imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); return imageView; } }
3,main布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.yz.myviewpagertest.MainActivity"> <ListView android:id="@+id/listview_main" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </RelativeLayout>
4,viewpager布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp"> <android.support.v4.view.ViewPager android:id="@+id/viewpager_main" android:layout_width="match_parent" android:layout_height="200dp" android:background="#00f"> </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/lin" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_alignParentBottom="true" android:gravity="center_horizontal" android:orientation="horizontal"> </LinearLayout> </RelativeLayout>