Multi-line, horizontal scrolling page of GridView instance source code _android in Android

Source: Internet
Author: User
Functional Requirements:
(1) For example, each page display 2x2, a total of 2XN, each item display picture + text (click on the link).
If a single line scrolls horizontally, it can be implemented with Horizontalscrollview.
If multiple lines are scrolled horizontally, the combination of the GridView (typically vertical scrolling) and Horizontalscrollview implementations.
(2) Horizontal scrolling page, below the display of the current page icon.

1. Implement custom Horizontalscrollview (Horizontalscrollview.java):
Because you need to pass the current page to the caller when you want to page it, you implement it in the fling function instead of invoking the fling of the parent class.
Copy Code code as follows:

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 {
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. Layout file Activity_main.xml:
Copy Code code as follows:

<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 Interface (Idrawerpresenter.java):
Copy Code code as follows:

Public interface Idrawerpresenter {
Idrawerpresenter getinstance ();
void dispatchevent (int totalpages, int currentpage);
}

4.DrawerItem
Copy Code code as follows:

<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= "Coupon 1"
Android:textcolor= "#000000"
android:textstyle= "Bold"/>
</LinearLayout>

5.mainactivity.java
(1) To implement the Idrawerpresenter interface, in the Horizontalscrollview through the Idrawerpresenter interface to return the current page, thereby updating the pageindicator.
Copy Code code as follows:

@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) Updates for Pageitemimageview and page indicator
Pageitemimageview displays the normal page indicator, and then replaces the picture of the current sheet with selected.
Copy Code code as follows:

Protected class Pageitemimageview extends ImageView {
Public Pageitemimageview {
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 (The new Pageitemimageview (this), params);
} else {
Layout_pagenumber.addview (This) (new Pageitemimageview);
}
}
Pageitemimageview Selitem = (pageitemimageview) layout_pagenumber.getchildat (sel_page);
Bitmap Bitmap = Bitmapfactory.decoderesource (Getresources (), r.drawable.icon_page_selected);
Selitem.setimagebitmap (bitmap);
}

(3) Drawerlistadapter
Copy Code code as follows:

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;
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:
Realize Onitemclicklistener.
(5) Updatedrawerlayout
After you get the size of data, you can calculate the number of rows to get the fixed row.
Intnumcols = (Draweritemlist.size ()-1)/2 + 1
Then calculate the width of the GridView. Because each page can display 2 columns, the last page may not have the right, in order to turn the page smooth, you can add a column of blank to the GridView.
Intgridviewwid = Numcols * Colwid + (Numcols + 1) * spaceing;
if (numcols% 2 = 1) {
gridviewwid+= Colwid + spaceing;
}
Copy Code code as follows:

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);
}

Effect Chart:
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.