有很多人在使用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>