Android development list Interface

Source: Internet
Author: User

On the android development list page, a question is displayed on the top, an icon is displayed on the bottom, and a list is displayed in the middle.

Let's take a look at the effect.

When you click on the top of the page, the background image is displayed. Let's take a look at how to make this effect.

1. Create an android Project

Modify the content in Main. XML as follows:

View code

<? XML version = "1.0" encoding = "UTF-8"?>
<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Orientation = "vertical" Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<Linearlayout Android: layout_height = "28px"
Android: layout_width = "fill_parent" Android: Orientation = "horizontal"
Android: gravity = "center_vertical" Android: paddingleft = "5px"
Android: Background = "@ drawable/top_bg">
<Imageview Android: layout_width = "25px"
Android: layout_height = "18px" Android: src = "@ drawable/manage"> </imageview>
<Textview Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" Android: textcolor = "#000"
Android: textsize = "14px" Android: text = "Account"> </textview>
</Linearlayout>

<! -- Intermediate List -->
<Gridview Android: Id = "@ + ID/gv_apps" Android: layout_height = "fill_parent"
Android: layout_width = "fill_parent" Android: numcolumns = "3"
Android: horizontalspacing = "20px" Android: verticalspacing = "20px"
Android: listselector = "@ drawable/choose_gridview"
Android: layout_margintop = "28px" Android: layout_marginbottom = "50px"
Android: layout_marginleft = "5px" Android: layout_marginright = "5px"> </gridview>

<Relativelayout Android: layout_width = "fill_parent"
Android: layout_height = "34px" Android: layout_alignparentbottom = "true"
Android: Background = "@ drawable/bottom_bg">
<Imagebutton Android: Id = "@ + ID/ib_change_view"
Android: layout_alignparentleft = "true" Android: layout_marginleft = "5px"
Android: layout_margintop = "1px" Android: Background = "@ drawable/button1"
Android: layout_width = "32px" Android: layout_height = "32px"> </imagebutton>
<Imagebutton Android: Id = "@ + ID/ib_change_view"
Android: layout_alignparentleft = "true" Android: layout_marginleft = "50px"
Android: layout_margintop = "1px" Android: Background = "@ drawable/button2"
Android: layout_width = "32px" Android: layout_height = "32px"> </imagebutton>
<Imagebutton Android: Id = "@ + ID/ib_change_view"
Android: layout_alignparentleft = "true" Android: layout_marginleft = "100px"
Android: layout_margintop = "1px" Android: Background = "@ drawable/button3"
Android: layout_width = "32px" Android: layout_height = "32px"> </imagebutton>
<Imagebutton Android: Id = "@ + ID/ib_change_category"
Android: layout_alignparentleft = "true" Android: layout_marginleft = "150px"
Android: layout_margintop = "1px" Android: Background = "@ drawable/button4"
Android: layout_width = "32px" Android: layout_height = "32px"> </imagebutton>
</Relativelayout>

</Relativelayout>

Two la s are used here.

Relativelayout: children is related to each other or their parent location, which is often used in form.

Linearlayout: children is arranged in the form of one row and multiple columns or one column and multiple rows. This layout is the most common

The gridview displays the layout of the Grid. Generally, you can add various adapters. This is a typical Implementation of the adapter. Object-oriented in Android is really good...

2. Add the gridviewadapter. Java class

The input content is as follows:

View code

Public class gridviewadapter extends baseadapter {
// Store each element
Private list <viewitem> listitem = new arraylist <viewitem> ();

// Convert an XML file into a view
Layoutinflater Inflater;

Public gridviewadapter (context ){
This. Inflater = layoutinflater. From (context );
Init ();
}

Private void Init (){
// Initialize it here and put it in the database later
Viewitem vi1 = new viewitem ();
Vi1.setname ("recording accounts ");
Vi1.setimgname (R. drawable. img1 );
Viewitem vi2 = new viewitem ();
Vi2.setname ("recording accounts ");
Vi2.setimgname (R. drawable. img2 );
Viewitem vi3 = new viewitem ();
Vi3.setname ("recording accounts ");
Vi3.setimgname (R. drawable. img3 );
Viewitem vi4 = new viewitem ();
Vi4.setname ("recording accounts ");
Vi4.setimgname (R. drawable. img4 );
Viewitem vi5 = new viewitem ();
Vi5.setname ("recording accounts ");
Vi5.setimgname (R. drawable. img5 );
Viewitem vi6 = new viewitem ();
Vi6.setname ("recording accounts ");
Vi6.setimgname (R. drawable. img6 );
Listitem. Add (vi1 );
Listitem. Add (vi2 );
Listitem. Add (vi3 );
Listitem. Add (vi4 );
Listitem. Add (vi5 );
Listitem. Add (vi6 );
}

Public int getcount (){
// Todo auto-generated method stub
Return listitem. Size ();
}

Public object getitem (INT arg0 ){
// Todo auto-generated method stub
Return arg0;
}

Public long getitemid (INT arg0 ){
// Todo auto-generated method stub
Return arg0;
}

Public View getview (INT arg0, view arg1, viewgroup arg2 ){
// Todo auto-generated method stub
View view = Inflater. Inflate (R. layout. gv_item, null );
Textview TV = (textview) view. findviewbyid (R. Id. gv_item_appname );
Imageview IV = (imageview) view. findviewbyid (R. Id. gv_item_icon );

TV. settext (listitem. Get (arg0). getname ());
Iv. setimageresource (listitem. Get (arg0). getimgname ());

Return view;
}

}

Configure the adapter and convert the XML into a view for processing.

Inherit the baseadapter and implement the methods in it.

3. Modify the main layout File class

View code

Public class accountmain extends activity {
/** Called when the activity is first created .*/
Private gridview GV;

@ Override
Public void oncreate (bundle savedinstancestate ){
Super. oncreate (savedinstancestate );

// Remove title
Requestwindowfeature (window. feature_no_title );
// Full screen
Getwindow (). setflags (windowmanager. layoutparams. flag_fullscreen,
Windowmanager. layoutparams. flag_fullscreen );

Setcontentview (R. layout. Main );

GV = (gridview) This. findviewbyid (R. Id. gv_apps );

GV. setadapter (New gridviewadapter (accountmain. This ));
}
}

First instantiate the gridview, and then pass in the corresponding adapter information, so that the above effect is achieved!

The Android: src attribute of imagebutton is displayed if the image set is large. The solution is either Android: background or imageview.

This is just a demonstration of one of the interfaces. The init part of this part can be further processed and can be dynamically configured.

You can configure the configuration information to the configuration file or to the database, that is, sqllite.

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.