Android UI: How to Use the hidden layout drawer in android

Recently I am writing an application and want to put the setting page and the application page together so that users can see the impact of their settings on the UI in real time, in this way, you can easily set your favorite interface. After thinking for a while, I found that using the slidingDrawer control can achieve this effect. That is, a drawer. Open the drawer and occupy half of the screen. The other half of the screen is displayed on the application page. The results are good.

Today I will share with you the drawer effect in android. In fact, lanucher in android is a drawer. You can open it to see the installed application. I believe everyone has ever seen it. Next we will make the same effect, of course, just the same effect on the UI.

The slidingDrawer control is easy to use and can be basically configured in xml. The Code is as follows.

Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<RelativeLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: text = "@ string/hello"
Android: textSize = "20sp"
/>
<SlidingDrawer
Android: id = "@ + id/sd"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: handle = "@ + id/iv"
Android: content = "@ + id/myContent"
Android: orientation = "vertical"
>

<ImageView
Android: id = "@ + id/iv"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/open1"
/>

<GridView
Android: id = "@ id/myContent"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: numColumns = "3"
Android: background = "@ drawable/background"
Android: gravity = "center"
/>

</SlidingDrawer>
</RelativeLayout>

Android: handle: indicates the image of the drawer under the SlidingDrawer label. Android: content: The layout in the drawer. With this layout, a drawer came out.

Let's take a look at the Chouti class code.

Copy codeThe Code is as follows: public class Chouti extends Activity {

Private GridView gv;
Private SlidingDrawer sd;
Private ImageView iv;
Private int [] icons = {R. drawable. browser, R. drawable. gallery,
R. drawable. camera, R. drawable. gmail,
R. drawable. music, R. drawable. market,
R. drawable. phone, R. drawable. messages, R. drawable. maps };
Private String [] items = {"Browser", "image", "camera", "Clock", "Music", "market", "dialing", "information ", "map "};

/** Called when the activity is first created .*/
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
Gv = (GridView) findViewById (R. id. myContent );
Sd = (s0000ingdrawer) findViewById (R. id. sd );
Iv = (ImageView) findViewById (R. id. iv );
MyAdapter adapter = new MyAdapter (this, items, icons); // customize MyAdapter to display the icon and item
Gv. setAdapter (adapter );
Sd. setOnDrawerOpenListener (new s0000ingdrawer. OnDrawerOpenListener () // open the drawer
{
@ Override
Public void onDrawerOpened ()
{
Iv. setImageResource (R. drawable. close1); // in response to the drawer opening event, set the image to
}
});
Sd. setOnDrawerCloseListener (new SlidingDrawer. OnDrawerCloseListener ()
{
@ Override
Public void onDrawerClosed ()
{
Iv. setImageResource (R. drawable. open1); // responds to the close drawer event
}
});
}
}

Import the layout in the entire class, and set monitoring events for the switch drawer. Here we need to customize a MyAdapter to display the image with the text subject.

The following is the code of the MyAdapter class.

Copy codeThe Code is as follows: public class MyAdapter extends BaseAdapter
{
Private Context _ ct;
Private String [] _ items;
Private int [] _ icons;

Public MyAdapter (Context ct, String [] items, int [] icons) // Constructor
{
_ Ct = ct;
_ Items = items;
_ Icons = icons;
}

@ Override
Public int getCount ()
{
Return _ items. length;
}

@ Override
Public Object getItem (int arg0)
{
Return _ items [arg0];
}

@ Override
Public long getItemId (int position)
{
Return position;
}

@ Override
Public View getView (int position, View convertView, ViewGroup parent)
{
LayoutInflater factory = LayoutInflater. from (_ ct );
View v = (View) factory. inflate (R. layout. gv, null); // bind custom layout
ImageView iv = (ImageView) v. findViewById (R. id. icon );
TextView TV = (TextView) v. findViewById (R. id. text );
Iv. setImageResource (_ icons [position]);
TV. setText (_ items [position]);
Return v;
}
}

It is also very simple, and the layout used is as follows:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "vertical"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
>
<ImageView
Android: id = "@ + id/icon"
Android: layout_width = "wrap_content"
Android: layout_height = "40px"
Android: layout_gravity = "center"
/>
<TextView
Android: id = "@ + id/text"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: gravity = "center"
Android: textColor = "# ffffffff"
/>
</LinearLayout>

In this way, our drawer is complete. Let's see the effect.

So much. The drawer control is very practical. In addition to the application I mentioned at the beginning in the program, there are a lot of uses. using your imagination, the drawer will increase the color of your application.