[Android UI design and development] No. 17th: Sliding menu bar (2) Example of slidingmenu, an open-source project

As explained in the previous article, I believe everyone has a preliminary understanding of the open-source slidingmenu Project (For details, refer

From this chapter, the bloggers will focus on slidingmenu, bringing you a wealth of examples and demos.

Slidingmenu has a deeper understanding and how to implement some cool sliding effects.

This article will bring you seven examples of different effects, each of which contains the most basic usage methods, from easy to difficult, step by step. Yes

This allows beginners to quickly learn how to use slidingmenu. The next article will bring you three different animation effects to achieve sliding menu bar

.

These examples are all self-contained examples in the slidingmenu open-source project.

As a result, you must import a lot of libraries, which is also very troublesome to use. In order to make it easier for everyone to learn, the author will list each example

I just took it out and added some very detailed notes so that beginners can understand it at a glance, so the goal of the blogger is achieved.

Okay. I hope you can continue to support it!

 

I. Example

 

First, it is the consistent style of the blogger. This will give you a general understanding of the implementation of the effect, and you can get what you want from it.

Effect.

 

1. Example 1

 

This example shows how to change the different effects of the sliding menu by changing different values. The values can be set as follows:

<1> set the position displayed on the left, right, or left and right sides of the sliding menu );

<2> set the touch screen mode (the sliding menu is opened by full screen touch, the sliding menu is opened by edge touch, or the sliding menu cannot be opened by the touch );

<3> set the zoom effect when sliding the menu and disable it (the greater the value, the more obvious the effect );

<4> set the shadow effect when sliding the menu and disable the effect (the greater the value, the more obvious the effect );

<5> set the gradient effect when sliding the menu (the greater the value, the more obvious the effect ).

Yi 2

 

2. Example 2

 

This example shows how to implement a simple sliding menu bar on the left.

I

 

3. Example 3

 

This example stores two views on both the left and right sides and can be opened by sliding the screen.

 

4. Example 4

 

This example shows how to change the content of the main view through fragment.

 

5. Example 5

 

This example also uses fragment to change the interface content of the main view, but the difference is that the list stores images, and

It is compressed and displayed.

 

 

6. Example 6

 

In this example, the viewpager class is used to store multiple fragations in viewpager and display them in the main interface view.

Yi 2

 

7. Example 7

 

This example mainly demonstrates that the titlebar in the above title bar does not slide along when the touch screen slides, but only the content view in the middle slides. (Evernote achieves this effect)

 

Ii. Code explanation

 

As there are many examples, I will not explain the code of each example one by one. Here I will pick a basic example to explain it to you.

. At the end of the article, I will package all the examples for you to download and learn. There are some detailed notes in them. I believe you can understand them at a glance.

 

1. Project Structure

 

 

2. content_frame.xml Layout

Let's start with the layout file. Why do we need to define a content_frame.xml? The main purpose is to define a virtual view, so that fragment can replace the view, so that the fragment View content can be displayed on the screen.

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/content_frame"    android:layout_width="match_parent"    android:layout_height="match_parent" />

We can see that a framelayout layout is defined here, and an ID is attached to it, so that the layout object can be found in the system.

3. menu_frame.xmlLayout

This layout file is used to store the View Interface after the sliding menu is opened.

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/menu_frame"    android:layout_width="match_parent"    android:layout_height="match_parent" />

 

4. List. xml

This list layout file is used in listfragment.

<?xml version="1.0" encoding="utf-8"?><ListView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/list"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingLeft="@dimen/list_padding"    android:paddingRight="@dimen/list_padding" />

 

5. Row. xml

Stores images and text in the list.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="horizontal" >    <ImageView        android:id="@+id/row_icon"        android:layout_width="50dp"        android:layout_height="50dp"        android:padding="10dp"        android:src="@drawable/ic_launcher" />    <TextView        android:id="@+id/row_title"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center_vertical"        android:padding="10dp"        android:text="Medium Text"        android:textAppearance="@android:style/TextAppearance.Medium" /></LinearLayout>

 

6. Shadow. xml Resources

This resource file is used to implement the shadow effect graph and uses the gradient drawing effect.

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient        android:endColor="#33000000"        android:centerColor="#11000000"        android:startColor="#00000000" /></shape>

 

7. samplelistfragment class

After finishing the layout file, let's look at the Java file. This class is used to display the list on the interface.

Package COM. yangyu. myslidingmenudemo02; import android. content. context; import android. OS. bundle; import android. support. v4.app. listfragment; import android. view. layoutinflater; import android. view. view; import android. view. viewgroup; import android. widget. arrayadapter; import android. widget. imageview; import android. widget. textview;/*** @ author yangyu * Function Description: List fragment, used to display the list view */public class samplelistfragment extends listfragment {public view oncreateview (layoutinflater Inflater, viewgroup container, bundle savedinstancestate) {return Inflater. inflate (R. layout. list, null);} public void onactivitycreated (bundle savedinstancestate) {super. onactivitycreated (savedinstancestate); sampleadapter adapter = new sampleadapter (getactivity (); For (INT I = 0; I <20; I ++) {adapter. add (New sampleitem ("sample list", android. r. drawable. ic_menu_search);} setlistadapter (adapter);} private class sampleitem {Public String tag; Public int iconres; Public sampleitem (string tag, int iconres) {This. tag = tag; this. iconres = iconres;} public class sampleadapter extends arrayadapter <sampleitem> {public sampleadapter (context) {super (context, 0);} public view getview (INT position, view convertview, viewgroup parent) {If (convertview = NULL) {convertview = layoutinflater. from (getcontext ()). inflate (R. layout. row, null);} imageview icon = (imageview) convertview. findviewbyid (R. id. row_icon); icon. setimageresource (getitem (position ). iconres); textview Title = (textview) convertview. findviewbyid (R. id. row_title); title. settext (getitem (position ). tag); Return convertview ;}}}

8. mainactivity class

This is the entry class of the entire program. In this class, you can also set the attributes of slidingmenu.

Package COM. yangyu. myslidingmenudemo02; import android. OS. bundle; import android. support. v4.app. fragmentactivity; import COM. jeremyfeinstein. slidingmenu. lib. slidingmenu; public class mainactivity extends fragmentactivity {private slidingmenu menu; @ overrideprotected void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); // set the title settitle ("Attach"); // initialize the sliding menu initslidingmenu ();}/*** initialize the sliding menu */private void initslidingmenu () {// set the main interface view setcontentview (R. layout. content_frame); getsupportfragmentmanager (). begintransaction (). replace (R. id. content_frame, new samplelistfragment ()). commit (); // set the sliding menu attribute value menu = new slidingmenu (this); menu. settouchmodeabove (sregistringmenu. touchmode_fullscreen); menu. setshadowwidthres (R. dimen. shadow_width); menu. setshadowdrawable (R. drawable. shadow); menu. setbehindoffsetres (R. dimen. slidingmenu_offset); menu. setfadedegree (0.35f); menu. attachtoactivity (this, slidingmenu. sliding_content); // set the menu of the sliding menu. setmenu (R. layout. menu_frame); getsupportfragmentmanager (). begintransaction (). replace (R. id. menu_frame, new samplelistfragment ()). commit () ;}@ overridepublic void onbackpressed () {// click back to close the sliding menu if (menu. ismenushowing () {menu. showcontent ();} else {super. onbackpressed ();}}}

This is almost the end of the article. The next article will bring you the animation effect when you open the sliding menu. I hope you can continue to pay attention to it!

 

Sample source code

 

The compressed package contains all project examples:

 

Each project contains the source code, implementation, and APK that can be directly installed and run:

 

Note:When running a project, do not forget to import the slidingmenu_library project. For usage instructions, refer to the previous article.