Android 에서 여러 줄,수평 으로 굴 러 가 는 페이지 를 구현 하 는 Gridview 인 스 턴 스 원본

기능 요구 사항:(1)예 를 들 어 각 페이지 에 2X2 를 표시 하고 모두 2XN 이 며,각 아 이 템 은 그림+문 자 를 표시 합 니 다(링크 가 있 는 클릭).한 줄 수평 으로 굴 러 가면 Horizontalscrollview 로 구현 할 수 있 습 니 다.여러 줄 의 수평 스크롤 이 라면 Gridview(일반적으로 수직 스크롤)와 Horizontalscrollview 를 결합 하여 이 루어 집 니 다.(2)수평 으로 스크롤 하여 페이지 를 넘 깁 니 다.아래 에 현재 페이지 를 표시 하 는 icon 이 있 습 니 다.1.사용자 정의 Horizontal ScrollView 구현(Horizontal ScrollView.java):페이지 를 넘 기 려 면 현재 페이지 를 호출 자 에 게 전달 해 야 하기 때문에 fling 함수 에서 부모 클래스 의 fling 을 호출 하지 않 고 스스로 실행 합 니 다.

 
public class DrawerHScrollView extends HorizontalScrollView { 
private static final String TAG = "DrawerHScrollView"; 

private IDrawerPresenter drawerPresenter = null; 
private int currentPage = 0; 
private int totalPages = 1; 
private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable(); 
public DrawerHScrollView(Context context) { 
super(context); 
} 
public DrawerHScrollView(Context context, AttributeSet attrs) { 
super(context, attrs); 
} 
public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) { 
super(context, attrs, defStyle); 
} 

public void cleanup(){ 
currentPage = 0; 
totalPages = 1; 
drawerPresenter = null; 
if(positionLeftTopOfPages != null){ 
positionLeftTopOfPages.clear(); 
} 
} 

public void setParameters(int totalPages, int currentPage, int scrollDisX) { 
Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX); 
this.totalPages = totalPages; 
this.currentPage = currentPage; 
positionLeftTopOfPages.clear(); 
for (int i = 0;i<totalPages;i++){ 
int posx = (scrollDisX) * i; 
positionLeftTopOfPages.put(i, posx); 
Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx); 
} 
smoothScrollTo(0, 0); 
} 

public void setPresenter(IDrawerPresenter drawerPresenter ) { 
this.drawerPresenter = drawerPresenter; 
} 

@Override 
public void fling(int velocityX) { 
Log.v(TAG, "-->fling velocityX:"+velocityX); 
boolean change_flag = false; 
if (velocityX > 0 && (currentPage < totalPages - 1)){ 
currentPage++; 
change_flag = true; 
} else if (velocityX < 0 && (currentPage > 0)){ 
currentPage--; 
change_flag = true; 
} 
if (change_flag){ 
int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue(); 
Log.v(TAG, "------smoothScrollTo posx:"+postionTo); 
smoothScrollTo(postionTo, 0); 
drawerPresenter.dispatchEvent(totalPages, currentPage); 
} 
//super.fling(velocityX); 
} 
} 

2.레이아웃 파일 Activitymain.xml:

 
<com.example.multilinegridview.DrawerHScrollView 
android:id="@+id/hscrollview" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_margin="10dp" 
android:scrollbars="none" 
android:layout_below="@id/layout_drawer_top" 
android:layout_above="@id/layout_pagenumber" 
android:background="#CCCCCC" > 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="horizontal" > 
<GridView 
android:id="@+id/gridView" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" /> 
</LinearLayout> 
</com.example.multilinegridview.DrawerHScrollView> 

3.IDrawerPresenter 인터페이스(IDrawerPresenter.java):

 
public interface IDrawerPresenter { 
IDrawerPresenter getInstance(); 
void dispatchEvent(int totalPages, int currentPage); 
} 

4.DrawerItem

 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/layout_item" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:gravity="center" 
android:layout_gravity="center" 
android:background="#FFFFFF"> 
<ImageView 
android:id="@+id/ivIcon" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:src="@drawable/ic_launcher" /> 
<TextView 
android:id="@+id/tvTitle" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="   1" 
android:textColor="#000000" 
android:textStyle="bold"/> 
</LinearLayout> 

5.MainActivity.java(1)는 IDrawerPresenter 인 터 페 이 스 를 실현 하고 Horizontal ScrollView 에서 IDrawerPresenter 인 터 페 이 스 를 통 해 현재 페이지 로 돌아 와 pageindicator 를 업데이트 합 니 다.

 
@Override 
public IDrawerPresenter getInstance() { 
return this; 
} 
@Override 
public void dispatchEvent(int totalPages, int currentPage) { 
Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage); 
Message msg = Message.obtain(); 
msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT; 
msg.arg1 = totalPages; 
msg.arg2 = currentPage; 
handler.sendMessage(msg); 
} 

(2)PageItemImageView 와 page indicator 의 업데이트 PageItemImageView 는 normal 의 page indicator 를 표시 한 후 현재 페이지 의 그림 을 selected 로 바 꿉 니 다.

 
protected class PageItemImageView extends ImageView { 
public PageItemImageView(Context context) { 
super(context); 
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 
R.drawable.icon_page_normal); 
this.setImageBitmap(bitmap); 
} 
} 
public void updateDrawerPageLayout(int total_pages, int sel_page) { 
Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page); 
layout_pagenumber.removeAllViews(); 
if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){ 
Log.e(TAG, "total_pages or sel_page is outofrange."); 
return; 
} 
for (int i = 0;i< total_pages;i++){ 
if (i != 0){ 
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 
params.setMargins(5, 0, 0, 0); 
layout_pagenumber.addView(new PageItemImageView(this), params); 
} else { 
layout_pagenumber.addView(new PageItemImageView(this)); 
} 
} 
PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page); 
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected); 
selItem.setImageBitmap(bitmap); 
} 

(3)DrawerListAdapter

 
private class DrawerListAdapter extends BaseAdapter { 
private final String TAG = "MyListAdapter"; 
private LayoutInflater mInflater; 
private LinearLayout layout_item; 
private TextView tvTitle; 
private ImageView ivIcon; 
private final Context context; 
private int colWid; 
private int colHei; 
public DrawerListAdapter(Context context, int colWid, int colHei) { 
this.context = context; 
this.colWid = colWid; 
this.colHei = colHei; 
mInflater = (LayoutInflater) context 
.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
} 
public int getCount() { 
return drawerItemList.size(); 
} 
public Object getItem(int position) { 
return drawerItemList.get(position); 
} 
public long getItemId(int position) { 
return position; 
} 
public View getView(int position, View convertView, ViewGroup parent) { 
DrawerItem item = drawerItemList.get(position); 
if (convertView == null) { 
convertView = mInflater.inflate(R.layout.drawer_item, null); 
layout_item = (LinearLayout) convertView 
.findViewById(R.id.layout_item); 
ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon); 
tvTitle = (TextView) convertView.findViewById(R.id.tvTitle); 
if (colHei != 0 && colWid != 0) { 
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( 
colWid, colHei - 30); 
ivIcon.setLayoutParams(params); 
} 
convertView.setTag(layout_item); 
} else { 
layout_item = (LinearLayout) convertView.getTag(); 
} 
ivIcon.setImageResource(R.drawable.ic_launcher); 
tvTitle.setText(String.valueOf(position)); 
return convertView; 
} 
} 

(4)DrawerItemClickListener:OnItemClickListener 를 실현 합 니 다.(5)updateDrawerLayout 에서 data 의 size 를 얻 은 후 열 수 를 계산 하여 고정 줄 을 얻 을 수 있 습 니 다.intnumCols=(drawerItemList.size()-1)/2+1 gridview 의 width 를 계산 합 니 다.페이지 당 2 열 을 표시 할 수 있 기 때문에 마지막 페이지 는 오른쪽 에 없 을 수 있 습 니 다.페이지 를 넘 기기 위해 gridview 에 공백 을 추가 할 수 있 습 니 다.intgridViewWid = numCols * colWid + (numCols + 1) * spaceing; if(numCols % 2 == 1){ gridViewWid+= colWid + spaceing; }

 
public void updateDrawerLayout() { 
if ((drawerItemList == null) || (drawerItemList.size() == 0)) { 
Log.d(TAG, "itemList is null or empty"); 
return; 
} 
if (!hasMeasured){ 
Log.d(TAG, "hasMeasured is false"); 
return; 
} 
int scrollWid = hscrollview.getWidth(); 
int scrollHei = hscrollview.getHeight(); 
if (scrollWid <= 0 || scrollHei <= 0){ 
Log.d(TAG, "scrollWid or scrollHei is less than 0"); 
return; 
} 

int spaceing = 10; 
int colWid = (scrollWid - spaceing * 3) / 2; 
int colHei = (scrollHei - spaceing * 3) / 2; 
int numCols = (drawerItemList.size() - 1) / 2 + 1; 
int gridViewWid = numCols * colWid + (numCols + 1) * spaceing; 
// if numCols is odd (like 5), add blank space 
if (numCols % 2 == 1){ 
gridViewWid += colWid + spaceing; 
} 

LayoutParams params = new LayoutParams(gridViewWid, scrollHei); 
gridView.setLayoutParams(params); 
gridView.setColumnWidth(colWid); 
gridView.setHorizontalSpacing(spaceing); 
gridView.setVerticalSpacing(spaceing); 
gridView.setStretchMode(GridView.NO_STRETCH); 
gridView.setNumColumns(numCols); 
adapter = new DrawerListAdapter(this, colWid, colHei); 
listener = new DrawerItemClickListener(); 
gridView.setAdapter(adapter); 
gridView.setOnItemClickListener(listener); 
int pageNum = (drawerItemList.size() - 1) / 4 + 1; 
hscrollview.setParameters(pageNum, 0, scrollWid - spaceing); 
updateDrawerPageLayout(pageNum, 0); 
} 

효과 그림: