關於ListView的上方如何增加一個Viewpager,實現整體上下滑動

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








發佈了39 篇原創文章 · 獲贊 14 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章