2014-10-06 37 views
0

我想才達到這樣的機器人 - 創造一些像垂直viewpager

enter image description here

我已經做了這樣的事情跟列表視圖,但我的問題是,當我選擇一個項目,它不會有它按下時的顏色。 而且還有一個視圖尋呼機,我會有一個額外的容器,我可以把我的碎片。

如果像這樣的東西可以工作,它會更好!

enter image description here

Android: Vertical ViewPager 我讀過這個,看起來不錯,但我也想在屏幕左側的一些項目。

您認爲最好的方法是做什麼? 另外,我已經有一個導航抽屜,所以一個新的不會做到這一點。

回答

1

我已經做了這樣的事情跟列表視圖,但問題我 過的是,經過我選擇一個項目,它不會有它的顏色有 它被按下時。

這是一個簡單的修復。在onClick(View arg0)方法中,添加arg0.setSelected(true)。還要記住將舊視圖的選擇狀態設置爲false。

如果存在重複使用視圖的風險,則需要通過將數據列表更改爲映射並在條目中存儲布爾值來跟蹤選擇哪個視圖。但是,如果您想要將列表和詳細的片段一起滾動,或者列表足夠短,如圖片中所示,則不需要。

更改背景顏色選擇(繪製XML)

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item 
     android:color="@color/selected_color_resource" 
     android:state_selected="true" /> 
    <item 
     android:color="@color/color_resource" /> <!-- default --> 
</selector> 

第一個匹配的狀態將被使用,以便確保默認爲最後一個項目。

而且還與一個查看傳呼機我會有一個額外的容器,我可以把我的碎片我 。

是的,使用Brett的解決方案。用VerticalViewPager替換您的詳細片段。您需要將您的活動(或處理您的列表的任何類)設置爲ViewPager.SimpleOnPageChangeListener。這樣,當有人滾動選定的列表項可以改變。你可以做很多很酷的animaitons感謝這個漂亮的方法

onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
0

試試下面的例子中,

main.xml中

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 
    <com.brandontate.BTGridPager.BTFragmentGridPager 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:id="@+id/fragmentGridPager" 
      android:background="#ffff00"/> 

</LinearLayout> 

demo_fragment.xml

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:orientation="vertical" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent"> 

    <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical|center_horizontal" 
      android:id="@+id/label" 
      android:textSize="45sp" 
      android:textColor="@android:color/black" 
      android:layout_centerInParent="true" 
      /> 

</RelativeLayout> 

DemoFragment。的java

package com.demo.app; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.RelativeLayout; 
import android.widget.TextView; 
import com.brandontate.BTGridPager.BTFragmentGridPager; 
import com.example.BTGridPager.R; 

/** 
* BTGridPager 
* 
* @author Brandon Tate 
*/ 
public class DemoFragment extends Fragment { 

    TextView mLabel; 

    BTFragmentGridPager.GridIndex mGridIndex; 


    public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ 

     RelativeLayout layout = (RelativeLayout) inflater.inflate(R.layout.demo_fragment, container, false); 
     mLabel = (TextView) layout.findViewById(R.id.label); 
     setTxtRow(mGridIndex); 

     return layout; 

    } 


    public void setTxtRow(BTFragmentGridPager.GridIndex gridIndex) { 
     mLabel.setText("(" + gridIndex.getRow() + ", " + gridIndex.getCol() + ")"); 
    } 

    public void setGridIndex(BTFragmentGridPager.GridIndex gridIndex){ 
     mGridIndex = gridIndex; 
    } 

} 

Demo.java

package com.demo.app; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.util.Log; 
import com.brandontate.BTGridPager.BTFragmentGridPager; 
import com.example.BTGridPager.R; 

public class Demo extends FragmentActivity { 

    private BTFragmentGridPager.FragmentGridPagerAdapter mFragmentGridPagerAdapter; 

    /** 
    * Called when the activity is first created. 
    */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     final BTFragmentGridPager mFragmentGridPager = (BTFragmentGridPager) findViewById(R.id.fragmentGridPager); 

     mFragmentGridPagerAdapter = new BTFragmentGridPager.FragmentGridPagerAdapter() { 
      @Override 
      public int rowCount() { 
       return 10; 
      } 

      @Override 
      public int columnCount(int row) { 
       return 10; 
      } 

      @Override 
      public Fragment getItem(BTFragmentGridPager.GridIndex index) { 
       DemoFragment panelFrag1 = new DemoFragment(); 
       panelFrag1.setGridIndex(index); 

       return panelFrag1; 
      } 
     }; 

     mFragmentGridPager.setGridPagerAdapter(mFragmentGridPagerAdapter); 
    } 
} 

BTVerticalPagerFragment.java

package com.brandontate.BTGridPager; 

import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentStatePagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.LinearLayout; 

/** 
* BTGridPager 
* 
* @author Brandon Tate 
*/ 
public class BTVerticalPagerFragment extends Fragment { 

    /** Pager adapter. */ 
    private FragmentStatePagerAdapter mVerticalPagerAdapter; 

    /** Page change listener. */ 
    private ViewPager.OnPageChangeListener mPageChangeListener; 

    /** The actual pager. */ 
    private BTVerticalPager mPager; 

    /** The start page when the pager is loaded. */ 
    private int mStartPage = 0; 

    private BTFragmentGridPager mGridPager; 

    public BTVerticalPagerFragment(){ 

    } 

// public BTVerticalPagerFragment (BTFragmentGridPager gridPager) { 
// 
//  mGridPager = gridPager; 
// } 



    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

     LinearLayout view = new LinearLayout(getActivity()); 
     view.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)); 
     view.setId(1); 

     if (mGridPager != null) { 
      mPager = new BTVerticalPager(getActivity(), mGridPager); 
      mPager.setId(2); 
      mPager.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT)); 
      mPager.setAdapter(mVerticalPagerAdapter); 
      mPager.setCurrentItem(mStartPage); 
      mPager.setOnPageChangeListener(mPageChangeListener); 

      view.addView(mPager); 
     } 

     return view; 
    } 

    public FragmentStatePagerAdapter getVerticalPagerAdapter() { 
     return mVerticalPagerAdapter; 
    } 

    public void setGridPager(BTFragmentGridPager gridPager){ 
     mGridPager = gridPager; 
    } 

    public void setVerticalPagerAdapter(FragmentStatePagerAdapter verticalPagerAdapter) { 
     this.mVerticalPagerAdapter = verticalPagerAdapter; 

     if (mPager != null) 
      mPager.setAdapter(mVerticalPagerAdapter); 
    } 

    public void setPageChangeListener(ViewPager.OnPageChangeListener pageChangeListener) { 
     this.mPageChangeListener = pageChangeListener; 

     if (mPager != null) 
      mPager.setOnPageChangeListener(mPageChangeListener); 
    } 

    public BTVerticalPager getPager() { 
     return mPager; 
    } 

    public void setStartPage(int startPage) { 
     this.mStartPage = startPage; 
    } 

} 

BTVerticalPager.java

package com.brandontate.BTGridPager; 


import android.content.Context; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 

/** 
* BTGridPager 
* 
* @author Brandon Tate 
*/ 
public class BTVerticalPager extends ViewPager { 

    BTFragmentGridPager mGridPager; 

    public BTVerticalPager(Context context, BTFragmentGridPager gridPager) { 
     super(context); 
     init(); 

     mGridPager = gridPager; 
    } 

    public BTVerticalPager(Context context, AttributeSet attrs, BTFragmentGridPager gridPager) { 
     super(context, attrs); 
     init(); 

     mGridPager = gridPager; 
    } 

    private void init(){ 

     // The majority of the magic happens here 
     setPageTransformer(true, new VerticalPageTransformer()); 
     // The easiest way to get rid of the overscroll drawing that happens on the left and right 
     setOverScrollMode(OVER_SCROLL_NEVER); 
    } 

    @Override 
    protected void onPageScrolled(int position, float offset, int offsetPixels) { 
     super.onPageScrolled(position, offset, offsetPixels); 

     if (offset == 0 && mGridPager.shouldReset) { 
      getRootView().post(new Runnable() { 
       @Override 
       public void run() { 
        mGridPager.shouldReset = false; 
        mGridPager.resetAdapter(); 
       } 
      }); 
     } 
    } 

    private class VerticalPageTransformer implements ViewPager.PageTransformer { 

     @Override 
     public void transformPage(View view, float position) { 
      int pageWidth = view.getWidth(); 
      int pageHeight = view.getHeight(); 

      view.setAlpha(1); 
// 
//   if (position < -1 && !mGridPager.shouldReset) { // [-Infinity,-1) 
//    // This page is way off-screen to the left. 
//    view.setAlpha(0); 
// 
//   } 
      if (position >= -1 && position <= 1) { // [-1,1] 
       // Counteract the default slide transition 
       view.setTranslationX(pageWidth * -position); 

       //set Y position to swipe in from top 
       float yPosition = position * pageHeight; 
       view.setTranslationY(yPosition); 
      } 
//   } else if (!mGridPager.shouldReset) { // (1,+Infinity] 
//    // This page is way off-screen to the right. 
//    view.setAlpha(0); 
//   } 
     } 
    } 

    /** 
    * Swaps the X and Y coordinates of your touch event 
    */ 
    @Override 
    public boolean onTouchEvent(MotionEvent ev) { 
     //swap the x and y coords of the touch event 
     ev.setLocation(ev.getY(), ev.getX()); 

     return super.onTouchEvent(ev); 
    } 
} 

BTFragmentGridPager.java

package com.brandontate.BTGridPager; 


import android.content.Context; 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentActivity; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentStatePagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.view.View; 


/** 
* BTGridPager 
* 
* The grid pager works by maintaining a view port that moves around a virtual grid. The views to show in this viewport will be provided by the BTGridPagerAdapter. 
* When the a new page is selected the view port is updated to hold only the views surrounding it. 
* 
* @author Brandon Tate 
*/ 
public class BTFragmentGridPager extends ViewPager { 

    /** Bit flag for no wrapping. */ 
    public static final int GRID_WRAP_NONE = 0; 

    /** Bit flag for left side wrapping. */ 
    public static final int GRID_WRAP_LEFT = 1 << 1; 

    /** Bit flag for right side wrapping. */ 
    public static final int GRID_WRAP_RIGHT = 1 << 2; 

    /** Bit flag for top side wrapping. */ 
    public static final int GRID_WRAP_UP = 1 << 3; 

    /** Bit flag for bottom side wrapping. */ 
    public static final int GRID_WRAP_DOWN = 1 << 4; 

    /** Wrapping flag. */ 
    private int mWrappingFlags = (GRID_WRAP_DOWN | GRID_WRAP_UP | GRID_WRAP_RIGHT); 

    /** Bit flag for no resets. */ 
    public static final int GRID_RESET_NONE = 0; 

    /** Bit flag for resetting to first column on row change. */ 
    public static final int GRID_RESET_ROW = 1 << 1; 

    /** Bit flag for resetting to first row on column change. */ 
    public static final int GRID_RESET_COL = 1 << 2; 

    /** Reset Flag. */ 
    private int mResetFlags = GRID_RESET_NONE; 


    /** Current grid index. */ 
    public GridIndex mCurrentIndex = new GridIndex(0, 0); 

    /** The fragment grid pager adapter for retrieving views. */ 
    private FragmentGridPagerAdapter mGridPagerAdapter; 

    /** How many views to load on each side of the central view. */ 
    private int mGridPadding = 1; 

    boolean shouldReset = false; 

    public BTFragmentGridPager(Context context) { 
     super(context); 
     init(); 
    } 


    /** 
    * Used to inflate the Workspace from XML. 
    * 
    * @param context 
    *   The application's context. 
    * @param attrs 
    *   The attribtues set containing the Workspace's customization values. 
    */ 
    public BTFragmentGridPager(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 

    public void init(){ 
     resetAdapter(); 
    } 

    //***************************************************** 
    //* 
    //*   Helpers 
    //* 
    //***************************************************** 

    private boolean canScrollLeft(){ 
     return mGridPagerAdapter != null && !(mCurrentIndex.getCol() == 0 && (0 == (mWrappingFlags & GRID_WRAP_LEFT))); 
    } 

    private boolean canScrollRight(){ 
     return mGridPagerAdapter != null && !(mCurrentIndex.getCol() == (mGridPagerAdapter.columnCount(mCurrentIndex.getRow()) - 1) && (0 == (mWrappingFlags & GRID_WRAP_RIGHT))); 
    } 

    private boolean canScrollUp(){ 
     return mGridPagerAdapter != null && !(mCurrentIndex.getRow() == 0 && (0 == (mWrappingFlags & GRID_WRAP_UP))); 
    } 

    private boolean canScrollDown(){ 
     return mGridPagerAdapter != null && !(mCurrentIndex.getRow() == (mGridPagerAdapter.rowCount() - 1) && (0 == (mWrappingFlags & GRID_WRAP_DOWN))); 
    } 

    private GridIndex wrapGridIndex(GridIndex index){ 

     int newRow = index.getRow(); 

     if (newRow < 0) 
      newRow = mGridPagerAdapter.rowCount() + newRow; 
     else if(newRow >= mGridPagerAdapter.rowCount()) 
      newRow = (mGridPagerAdapter.rowCount() - newRow); 

     int newCol = index.getCol(); 

     if (newCol < 0) 
      newCol = mGridPagerAdapter.columnCount(newRow) + newCol; 
     else if (newCol >= mGridPagerAdapter.columnCount(newRow)) 
      newCol = (mGridPagerAdapter.columnCount(newRow) - newCol); 

     return new GridIndex(newRow, newCol); 
    } 

    /** 
    * Completely resets the adapter with updated current grid index. 
    * 
    * No access modifier -- package-private 
    */ 
    void resetAdapter(){ 

     // Clear old on page change listener to avoid unwanted actions 
     setOnPageChangeListener(null); 

     setAdapter(new FragmentGridHorizontalPagerAdapter(((FragmentActivity) getContext()).getSupportFragmentManager(), this)); 

     if (!canScrollLeft()) 
      setCurrentItem(0, false); 
     else if(!canScrollRight()) 
      setCurrentItem(getAdapter().getCount() - 1); 
     else 
      setCurrentItem(mGridPadding, false); 

     setOnPageChangeListener(new SimpleOnPageChangeListener(){ 

      @Override 
      public void onPageSelected(int i) { 

       // Default to wrapping index 
       int newCol = mCurrentIndex.getCol() + (-1 * (mGridPadding - i)); 

       // Adjust for limited wrapping 
       if (!canScrollLeft()) 
        newCol = mCurrentIndex.getCol() + i; 
       else if(!canScrollRight()) 
        newCol--; 

       mCurrentIndex = wrapGridIndex(new GridIndex((0 != (mResetFlags & GRID_RESET_COL)) ? 0 : mCurrentIndex.getRow() , newCol)); 

       shouldReset = true; 
      } 
     }); 
    } 

    @Override 
    protected void onPageScrolled(int position, float offset, int offsetPixels) { 
     super.onPageScrolled(position, offset, offsetPixels); 

     if (offset == 0 && shouldReset) { 
      getRootView().post(new Runnable() { 
       @Override 
       public void run() { 
        shouldReset = false; 
        resetAdapter(); 
       } 
      }); 

     } 
    } 

    @Override 
    protected boolean canScroll(View v, boolean checkV, int dx, int x, int y) { 
     return false; 
    } 

    //***************************************************** 
    //* 
    //*   Getters/Setters 
    //* 
    //***************************************************** 

    public FragmentGridPagerAdapter getGridPagerAdapter() { 
     return mGridPagerAdapter; 
    } 

    public void setGridPagerAdapter(FragmentGridPagerAdapter gridPagerAdapter) { 
     this.mGridPagerAdapter = gridPagerAdapter; 
     resetAdapter(); 
    } 

    public int getResetFlags() { 
     return mResetFlags; 
    } 

    public void setResetFlags(int resetFlags) { 
     this.mResetFlags = resetFlags; 
    } 

    public int getWrappingFlags() { 
     return mWrappingFlags; 
    } 

    public void setWrappingFlags(int wrappingFlags) { 
     this.mWrappingFlags = wrappingFlags; 
    } 


    //***************************************************** 
    //* 
    //*   Adapters 
    //* 
    //***************************************************** 

    public class FragmentGridHorizontalPagerAdapter extends FragmentStatePagerAdapter{ 

     FragmentManager fm; 
     BTFragmentGridPager mGridPager; 

     public FragmentGridHorizontalPagerAdapter(FragmentManager fm, BTFragmentGridPager gridPager) { 
      super(fm); 

      this.fm = fm; 
      this.mGridPager = gridPager; 
     } 

     @Override 
     public Fragment getItem(int i) { 

      if (mGridPagerAdapter == null) 
       return new Fragment(); 

      // Figure out if this is our vertical pager 
      boolean vpFragFlag = false; 

      if (!canScrollLeft() && i == 0) 
       vpFragFlag = true; 
      else if(!canScrollRight() && i == (getAdapter().getCount() - 1)) 
       vpFragFlag = true; 
      else if(canScrollLeft() && canScrollRight()) 
       vpFragFlag = (i == mGridPadding); 

      if (vpFragFlag){ 

       BTVerticalPagerFragment vpFragment = new BTVerticalPagerFragment(); 
       vpFragment.setGridPager(mGridPager); 

       vpFragment.setVerticalPagerAdapter(new FragmentStatePagerAdapter(fm){ 
        @Override 
        public Fragment getItem(int i) { 

         if (mGridPagerAdapter == null) 
          return new Fragment(); 

         int newCol = mCurrentIndex.getCol(); 

         // If it's not the middle one and we need a row reset 
         if (i != mGridPadding && (0 != (mResetFlags & GRID_RESET_ROW))) 
          newCol = 0; 


         // Default my view index wrapped 
         GridIndex viewIndex = wrapGridIndex(wrapGridIndex(new GridIndex(mCurrentIndex.getRow() + (-1 * (mGridPadding - i)), newCol))); 

         // Adjust for limited wrapping 
         if (!canScrollUp() || !canScrollDown()) { 
          if (i == this.getCount() - 1) 
           viewIndex.setRow(mGridPagerAdapter.rowCount() - 1); 
          else 
           viewIndex.setRow(mCurrentIndex.getRow() + i); 
         } 

         return mGridPagerAdapter.getItem(viewIndex); 
        } 

        @Override 
        public int getCount() { 
         return (mGridPadding * 2) + 1; 
        } 

        public int getItemPosition(Object object){ 
         return POSITION_NONE; 
        } 
       }); 


       if (!canScrollUp()) 
        vpFragment.setStartPage(0); 
       else if(!canScrollDown()) 
        vpFragment.setStartPage(vpFragment.getVerticalPagerAdapter().getCount() - 1); 
       else 
       vpFragment.setStartPage(mGridPadding); 

       vpFragment.setPageChangeListener(new SimpleOnPageChangeListener() { 

        @Override 
        public void onPageSelected(int i) { 
         int newRow = mCurrentIndex.getRow() + (-1 * (mGridPadding - i)); 

         if (!canScrollUp()) 
          newRow = mCurrentIndex.getRow() + i; 
         else if(!canScrollDown()) 
          newRow--; 

         int newCol = mCurrentIndex.getCol(); 

         // If it's not the middle one and we need a row reset 
         if (i != mGridPadding && (0 != (mResetFlags & GRID_RESET_ROW))) 
          newCol = 0; 

         mCurrentIndex = wrapGridIndex(new GridIndex(newRow, newCol)); 

         shouldReset = true; 

        } 

       }); 

       return vpFragment; 
      } 
      else{ 

       // Default my view index wrapped 
       GridIndex viewIndex = wrapGridIndex(new GridIndex((0 != (mResetFlags & GRID_RESET_COL)) ? 0 : mCurrentIndex.getRow(), mCurrentIndex.getCol() + (-1 * (mGridPadding - i)))); 

       // Adjust for limited wrapping 
       if (!canScrollLeft() || !canScrollRight()) 
        viewIndex.setCol(mCurrentIndex.getCol() + i); 

       return mGridPagerAdapter.getItem(viewIndex); 
      } 
     } 

     public int getItemPosition(Object object){ 
      return POSITION_NONE; 
     } 

     @Override 
     public int getCount() { 
      return (mGridPadding * 2) + 1; 
     } 

    } 

    public interface FragmentGridPagerAdapter{ 

     public int rowCount(); 
     public int columnCount(int row); 
     public Fragment getItem(GridIndex index); 

    } 

    //***************************************************** 
    //* 
    //*   Data Types 
    //* 
    //***************************************************** 

    public class GridIndex{ 

     private int mRow = 0, mCol = 0; 

     public GridIndex(int row, int col){ 

      mRow = row; 
      mCol = col; 

     } 

     public int getRow() { 
      return mRow; 
     } 

     public void setRow(int row) { 
      this.mRow = row; 
     } 

     public int getCol() { 
      return mCol; 
     } 

     public void setCol(int col) { 
      this.mCol = col; 
     } 

     @Override 
     public String toString() { 
      return "GridIndex{" + 
        "mRow=" + mRow + 
        ", mCol=" + mCol + 
        '}'; 
     } 

     @Override 
     public boolean equals(Object o) { 
      if (this == o) return true; 
      if (o == null || getClass() != o.getClass()) return false; 

      GridIndex gridIndex = (GridIndex) o; 

      if (mCol != gridIndex.mCol) return false; 
      if (mRow != gridIndex.mRow) return false; 

      return true; 
     } 
    } 
}