Android QQ space (apad) Project Summary (III)-build the app UI framework !!!

Hello, everyone. Today is New Year's Day. Wish you a happy holiday! Today we will share with you the UI framework of apad Qzone. The interaction diagram is as follows:

Figure 1: interaction.

It can be seen that the UI framework of the entire application is relatively simple and can be divided into two parts: the left navigation bar and the right content area. When we click on the left navigation bar, the corresponding content is displayed on the right.

The main content of an application is divided into four modules: Friend dynamics, personal homepage, friend list, and Application Center. The content displayed on the right is managed by a manager, which manages the containers on the right and the display content panel.

I wrote a simple demo and drew a UI structure for your convenience:

First, create an android project named qzoneframedemo. The structure is as follows:

Figure 2: program code structure:

In order to better understand the code, I drew a diagram of various classes as follows:

Qzrightwindowmanger manages qzrightwindowcontainer and the four windows on the right. qzrightwindowcontainer inherits framelayout, and the four windows inherit qzrightwindowcontabase.

The qzrightwindowcontainer code is as follows (inherits framelayout ):

package com.tutor.frame;import android.content.Context;import android.util.AttributeSet;import android.widget.FrameLayout;public class QZRightWindowContainer extends FrameLayout {public QZRightWindowContainer(Context context){super(context);}public QZRightWindowContainer(Context context, AttributeSet attrs) {super(context, attrs);}}

The code for the qzrightwindowbase class of the four windows on the right is as follows:

Package COM. tutor. frame; import android. content. context; import android. util. attributeset; import android. widget. framelayout; import android. widget. textview; public abstract class qzrightwindowbase extends framelayout {public textview mcontenttextview; private layoutparams Params = new layoutparams (layoutparams. fill_parent, layoutparams. fill_parent); Public qzrightwindowbase (context) {super (context); setupviews ();} public qzrightwindowbase (context, attributeset attrs) {super (context, attrs ); setupviews ();} private void setupviews () {mcontenttextview = new textview (getcontext (); mcontenttextview. setlayoutparams (Params);} // do something for the sake of extension. Public abstract void dosomething (); // do something 2 public abstract void dosomething2 ();}

The right-side window window1 is the qzrightwindow1 code (other codes are not pasted) as follows:

Package COM. tutor. frame; import android. content. context; import android. graphics. color; import android. util. attributeset; public class qzrightwindow1 extends qzrightwindowbase {public qzrightwindow1 (context) {super (context); setupviews ();} public qzrightwindow1 (context, attributeset attrs) {super context, attrs); setupviews ();} private void setupviews () {mcontenttextview. settext ("friend Dynamics"); mcontenttextview. setbackgroundcolor (color. red); addview (mcontenttextview) ;}@ overridepublic void dosomething () {// todo auto-generated method stub} @ overridepublic void dosomething2 () {// todo auto-generated method stub }}

The following code manages qzrightwindowcontainer and qzrightwindowmanager in the four windows on the right:

Package COM. tutor. frame; import Java. util. hashmap; import Java. util. iterator; import android. view. view; public class qzrightwindowmanager {/*** friend dynamic panel key */public static final int friend_trends_window = 0; /*** key of the personal center panel */public static final int home_page_window = 1;/*** key of the friend relationship chain panel */public static final int friend_list_window = 2; /*** key of the application center panel */public static final int app_center_windo W = 3; private hashmap <integer, qzrightwindowbase> mhashmap; private qzrightwindowcontainer mcontainer; Public qzrightwindowmanager () {mhashmap = new hashmap <integer, qzrightwindowbase> ();} public void setmcontainer (qzrightwindowcontainer container) {This. mcontainer = container;} public void showrightwindow (INT num, qzrightwindowbase mqzrightwindowbase) {If (! Mhashmap. containskey (Num) {mhashmap. Put (Num, mqzrightwindowbase); If (! (Mqzrightwindowbase instanceof qzrightwindow1) {mcontainer. addview (mqzrightwindowbase) ;}}for (iterator iter = mhashmap. keyset (). iterator (); ITER. hasnext ();) {object key = ITER. next (); qzrightwindowbase QZB = mhashmap. get (key); QZB. setvisibility (view. invisible);} mqzrightwindowbase. setvisibility (view. visible );}}

The main program qzoneframedemoactivity code is as follows:

package com.tutor.framedemo;import com.tutor.frame.QZLeftNavBar;import com.tutor.frame.QZRightWindow1;import com.tutor.frame.QZRightWindow2;import com.tutor.frame.QZRightWindow3;import com.tutor.frame.QZRightWindow4;import com.tutor.frame.QZRightWindowBase;import com.tutor.frame.QZRightWindowContainer;import com.tutor.frame.QZRightWindowManager;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;public class QzoneFrameDemoActivity extends Activity implements OnClickListener{    private QZRightWindow1 mQzRightWindow1;private QZRightWindow2 mQzRightWindow2;private QZRightWindow3 mQzRightWindow3;private QZRightWindow4 mQzRightWindow4;private QZLeftNavBar mQzLeftNavBar;private QZRightWindowContainer mQzRightWindowContainer;private QZRightWindowManager mQzRightWindowManager;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                setupViews();    }        private void setupViews(){    mQzRightWindowManager = new QZRightWindowManager();        mQzLeftNavBar = (QZLeftNavBar)findViewById(R.id.navbar);        mQzLeftNavBar.findViewById(R.id.rw1).setOnClickListener(this);    mQzLeftNavBar.findViewById(R.id.rw2).setOnClickListener(this);    mQzLeftNavBar.findViewById(R.id.rw3).setOnClickListener(this);    mQzLeftNavBar.findViewById(R.id.rw4).setOnClickListener(this);        mQzRightWindow1 = (QZRightWindow1)findViewById(R.id.qzrw1);        mQzRightWindowContainer = (QZRightWindowContainer)findViewById(R.id.container);    mQzRightWindowManager.setmContainer(mQzRightWindowContainer);    }    private void showRightWindow(int num,QZRightWindowBase mQzRightWindowBase){    mQzRightWindowManager.showRightWindow(num, mQzRightWindowBase);    }    @Overridepublic void onClick(View v) {int id = v.getId();switch (id) {case R.id.rw1:showRightWindow(QZRightWindowManager.FRIEND_TRENDS_WINDOW, mQzRightWindow1);break;case R.id.rw2:if(mQzRightWindow2 == null){mQzRightWindow2 = new QZRightWindow2(this);}showRightWindow(QZRightWindowManager.HOME_PAGE_WINDOW, mQzRightWindow2);break;case R.id.rw3:if(mQzRightWindow3 == null){mQzRightWindow3 = new QZRightWindow3(this);}showRightWindow(QZRightWindowManager.FRIEND_LIST_WINDOW, mQzRightWindow3);break;case R.id.rw4:if(mQzRightWindow4 == null){mQzRightWindow4 = new QZRightWindow4(this);}showRightWindow(QZRightWindowManager.APP_CENTER_WINDOW, mQzRightWindow4);break;default:break;}}}

The main. XML code of the layout file used by the main program is as follows:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="horizontal" >    <com.tutor.frame.QZLeftNavBar        android:id="@+id/navbar"        android:layout_width="wrap_content"        android:layout_height="fill_parent"/>    <com.tutor.frame.QZRightWindowContainer        android:id="@+id/container"        android:layout_width="fill_parent"        android:layout_height="fill_parent"     >     <com.tutor.frame.QZRightWindow1          android:id="@+id/qzrw1"          android:layout_width="fill_parent"        android:layout_height="fill_parent"       />     </com.tutor.frame.QZRightWindowContainer></LinearLayout>

The running effect is as follows:

Effect 1

Result 2.

OK. This is all done! For applications on pad, single activity, modular functions, and UI control are good options, which can increase development efficiency and reduce coupling with other students.

The link below is the source code for beginners to learn and use. Let's talk about it today. Thank you !!!

Click to enter the source code ==>