Android verwendet ViewPager+Realisierung der Paginationseffekte des Hauptmenü-Layouts in GridView

In letzter Zeit habe ich versucht, ViewPager zu verwenden+Die GridView implementiert, scheint alles in Ordnung zu sein, also keine unnötigen Worte, das spezifische Code wie folgt:

Wie im Bild zu sehen ist, das Effektbild

　

Zuerst analysieren wir den Ansatz

1.Zuerst ist die Anordnung: Das Gesamtkonzept besteht aus einem ViewPager, zu dem eine GridView als View in den Adapter des ViewPager hinzugefügt wird, darunter befinden sich Punkte

<?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="match_parent"
  android:background="#CDCDCD" >
  <RelativeLayout>
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#fff" >
    <android.support.v4.view.ViewPager
      android:id="@"+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
    <LinearLayout
      android:id="@"+id/Punkte"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="10dp"
      android:gravity="center"
      android:orientation="horizontal" />
  </RelativeLayout>
</RelativeLayout>

2.Das nächste ist die Layout-Datei des ViewPager-Items als GridView (wenn die äußere Ebene ein RelativeLayout oder eine LinearLayout ist, kann es zu Ausnahmen kommen)

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android
  android:id="@"+id/gridView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:numColumns="4">
</GridView>

3dies ist die Schreibweise des GridView-Adapters, insbesondere darauf zu achten, dass die Anzahl von10Daten gibt, maximal8wenn es8der zweite2alle-max

package com.item.jiejie.adapter;
import java.util.List;
import com.item.jiejie.ProdctBean;
import com.item.jiejie.R;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
/**
 * Adapter zum Laden von Daten in einer GridView
 * @author Administrator
 *
 */
public class MyGridViewAdapter extends BaseAdapter{
  private Context context;
  private List<ProdctBean> lists;//Datenquelle
  private int mIndex; // Seitenindex, zeigt an, auf welche Seite, beginnt bei 0
  private int mPargerSize;// 每页显示的最大数量
  public MyGridViewAdpter(Context context, List<ProdctBean> lists,
      int mIndex, int mPargerSize) {
    this.context = context;
    this.lists = lists;
    this.mIndex = mIndex;
    this.mPargerSize = mPargerSize;
  }
  /**
   * Zuerst prüfen Sie, ob die Größe der Daten vollständig angezeigt werden kann, lists.size() > (mIndex + 1)*mPagerSize
   * Wenn dies erfüllt ist, wird die maximale Anzahl der Elemente der Liste lists angezeigt
   * Wenn nicht genug angezeigt werden kann, um die maximale Anzahl der Seiten anzuzeigen, dann werden die verbleibenden paar angezeigt
   */
  @Override
  public int getCount() {
    // TODO Auto-generierter Methodenstummel
    return lists.size() > (mIndex + 1) * mPargerSize &63; 
        mPargerSize : (lists.size() - mIndex*mPargerSize);
  }
  @Override
  public ProdctBean getItem(int arg0) {
    // TODO Auto-generierter Methodenstummel
    return lists.get(arg0 + mIndex * mPargerSize);
  }
  @Override
  public long getItemId(int arg0) {
    // TODO Auto-generierter Methodenstummel
    return arg0 + mIndex * mPargerSize;
  }
  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generierter Methodenstummel
    ViewHolder holder = null;
    if(convertView == null){
      holder = new ViewHolder();
      convertView = View.inflate(context, R.layout.item_view, null);
      holder.tv_name = (TextView)convertView.findViewById(R.id.item_name);
      holder.iv_nul = (ImageView)convertView.findViewById(R.id.item_image);
      convertView.setTag(holder);
    } else {
      holder = (ViewHolder)convertView.getTag();
    }
    //Position neu bestimmen, da immer der Datenquelltext genommen wird, der in die GridView jeder Seite paginiert geladen wird
    final int pos = position + mIndex * mPargerSize;//angenommen mPageSiez
    //angenommen mPagerSize=8，falls Sie auf die zweite Seite klicken (d.h. mIndex=1）an der zweiten Position item(position=1), dann ist die tatsächliche Position dieses Elements pos=9
    holder.tv_name.setText(lists.get(pos).getName() + "",
    holder.iv_nul.setImageResource(lists.get(pos).getUrl());
    //Item-Überwachung hinzufügen
//    convertView.setOnClickListener(new View.OnClickListener() {
//      
//      @Override
//      public void onClick(View arg0) {
//        // TODO Auto-generierter Methodenstummel
//        Toast.makeText(context, "Sie haben geklickt auf" + lists.get(pos).getName(), Toast.LENGTH_SHORT).show();
//      }
//    });
    return convertView;
  }
  static class ViewHolder{
    private TextView tv_name;
    private ImageView iv_nul;
  }
}

4. Hier wird das Klickereignis der GridView bereitgestellt2Eine Methode ist, die Klickereignisse der Anpassungsebene mit Layout-Click-Events zu verarbeiten; die andere Methode ist, Object obj = gridView.getItemAtPosition(position) zu verarbeiten.

5. Das Hauptprogramm fügt die GridView als View in den ViewPager ein. Der Code ist wie folgt:

package com.item.jiejie;
import java.util.ArrayList;
import java.util.List;
import com.item.jiejie.adapter.MyGridViewAdpter;
import com.item.jiejie.adapter.MyViewPagerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget(AdapterView++;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
/**
 * 实现仿美团首页导航栏布局分页效果 
 * @author Administrator
 *
 */
public class MyActivity extends Activity {
  private ViewPager viewPager;
  private LinearLayout group;//圆点指示器
  private ImageView[] ivPoints;//小圆点图片的集合
  private int totalPage; //总的页数
  private int mPageSize = 8; //每页显示的最大数量
  private List<ProdctBean> listDatas;//总的数据源
  private List<View> viewPagerList;//将GridView作为一个View对象添加到ViewPager集合中
  //private int currentPage;//当前页
  private String[] proName = {"名称0","名称1","名称2","名称3","名称4","名称5",
      "名称6","名称7","名称8","名称9","名称10","名称11","名称12","名称13",
      "名称14","名称15","名称16","名称17","名称18","名称19"};
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generierter Methodenstummel
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    //初始化控件
    initView();
    //添加业务逻辑
    initData();
  }
  private void initView() {
    // TODO Auto-generierter Methodenstummel
    viewPager = (ViewPager)findViewById(R.id.viewpager);
    group = (LinearLayout)findViewById(R.id.points);
    listDatas = new ArrayList<ProdctBean>();
    for(int i =0 ; i < proName.length; i++{
      listDatas.add(new ProdctBean(proName[i], R.drawable.iv_driving));
    }
  }
  private void initData() {
    // TODO Auto-generierter Methodenstummel
    //Die Gesamtzahl der Seiten wird aufgerundet
    totalPage = (int) Math.ceil(listDatas.size() * 1.0 / mPageSize);
    viewPagerList = new ArrayList<View>();
    for (int i = 0; i < totalPage; i++{
      //Jede Seite wird als neue Instanz inflated
      final GridView gridView = (GridView)View.inflate(this, R.layout.item_gridview, null);
      gridView.setAdapter(new MyGridViewAdpter(this, listDatas, i, mPageSize));
      //Fügt item Click Listener hinzu
      gridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<63;> arg0, View arg1,
            int position, long arg3) {
          // TODO Auto-generierter Methodenstummel
          Object obj = gridView.getItemAtPosition(position);
          if(obj != null && obj instanceof ProdctBean){
            System.out.println(obj);
            Toast.makeText(MyActivity.this, ((ProdctBean)obj).getName(), Toast.LENGTH_SHORT).show();
          }
        }
      });
      //Jeder GridView wird als View-Objekt zur ViewPager-Kollektion hinzugefügt      
      viewPagerList.add(gridView);
    }
    //Setzt den ViewPager-Adapter
    viewPager.setAdapter(new MyViewPagerAdapter(viewPagerList));
    //Füge kleinen Punkt hinzu
    ivPoints = new ImageView[totalPage];
    for (int i = 0; i < totalPage; i++{
      //Zyklisch füge Punktebildergruppe hinzu
      ivPoints[i] = new ImageView(this);
      if (i == 0) {
        ivPoints[i].setImageResource(R.drawable.page_focuese);
      } else {
        ivPoints[i].setImageResource(R.drawable.page_unfocused);
      }
      ivPoints[i].setPadding(8, 8, 8, 8);
      group.addView(ivPoints[i]);
    }
    //Setze den Scroll-Listener für ViewPager,主要是设置点的背景颜色的改变
    viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
      @Override
      public void onPageSelected(int position) {
        // TODO Auto-generierter Methodenstummel
        //currentPage = position;
        for (int i = 0; i < totalPage; i++{
          if (i == position) {
            ivPoints[i].setImageResource(R.drawable.page_focuese);
          } else {
            ivPoints[i].setImageResource(R.drawable.page_unfocused);
          }
        }
      }
    });
  }
}

6.Code für ViewPage Adapter

package com.item.jiejie.adapter;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * Adapter für ViewPage
 * @author Administrator
 *
 */
public class MyViewPagerAdapter extends PagerAdapter{
  private List<View> viewList;//View ist eine TwentyGridView
  public MyViewPagerAdapter(List<View> viewList) {
    this.viewList = viewList;
  }
  @Override
  public int getCount() {
    // TODO Auto-generierter Methodenstummel
    return viewList!=null63; viewList.size() : 0;
  }
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-generierter Methodenstummel
    return arg0 == arg1;
  }
  /**
   * Fügen Sie den aktuellen View dem ViewGroup-Container hinzu
   * Diese Methode gibt ein Objekt zurück, das angibt, welchen Objekt der PagerAdapter-Adapter wählt, um das Objekt auf dem aktuellen ViewPage anzuzeigen
   */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    // TODO Auto-generierter Methodenstummel
    container.addView(viewList.get(position));
    return viewList.get(position);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO Auto-generierter Methodenstummel
     container.removeView((View) object);
  }
}

Dies ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir freuen uns auf Ihre Unterstützung und Ihr Engagement für das呐喊教程.

Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und gehört dem jeweiligen Autor. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Die Website übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit涉嫌版权 Missbrauch entdecken, senden Sie bitte eine E-Mail an: notice#w3Erklärung: Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, um Missbrauch zu melden, und fügen Sie relevante Beweise bei. Bei nachgewiesener Täuschung wird die fragliche Inhalte sofort gelöscht.