Project Practice ①-Kochi daily (2)-& gt; Use pullrefesh + Slidingmenu + custom components to write the main layout and extjs custom components

Project Practice ①-high imitation zhihu daily (2)-> Use pullrefesh + Slidingmenu + custom components to write the main layout and extjs custom components

① In fact, I didn't think about the layout of the Project architecture. I used my own framework to finish the basic page at the beginning, but I finally got stuck in the pull-on loading, finally, instructor Li helped me reconstruct the architecture and finally completed it. Thank you, Miss Li.
The main layout I believe everyone can see that pullrefesh and the sliding menu I want to write this article again, because it involves custom classes and extracts a class, I think we should talk about it one by one.

② Slide menu Slidingmenu
I. What is SlidingMenuSlidingMenu? It is a relatively new setting interface or configuration interface effect. The setting interface effect is displayed on the left or right sliding of the main interface, which facilitates various operations. Many excellent applications use this interface scheme, such as facebook, Renren, everynote, and Google +.
SlidingMenu two configuration slide menu: SlidingMenu: https://github.com/jfeinstein10/SlidingMenu
Dependency package: ActionBarSherlock: https://github.com/JakeWharton/ActionBarSherlock
Resolution Error
1. reconfigure the Library Link

2. Remove the self-contained support-v4.jar from the SlidingMenu class library

3. Configure SlidingMenu to reference the ActionBarSherlock class library

4. Modify the singingfragmentactivity under the SlidingMenu class library to inherit from the SherlockFragmentActivity

Common attributes
Set menu. setMode (SlidingMenu. LEFT) of the LEFT slide menu );
Set the sliding mode menu. setTouchModeAbove (SlidingMenu. TOUCHMODE_FULLSCREEN );
Set shadow menu. setShadowDrawable (R. drawable. shadow );
Set the shadow width menu. setShadowWidthRes (R. dimen. shadow_width );
The remaining width menu. setBehindOffsetRes (R. dimen. slidingmenu_offset) displayed on the homepage );
Menu. setBehindWidth (400 );
Gradient degree of sliding menu. setFadeDegree (0.35f );
Appended to the Activity menu. attachToActivity (this, SlidingMenu. SLIDING_CONTENT );
Set the menu layout file menu. setMenu (R. layout. menu_layout );
Dynamically determine whether to actively close or enable menu. toggle ();
Display menu. showMenu ();
Display content menu. showContent ();
Enable menu. setOnOpenListener (onOpenListener) for the listener; Disable menu. OnClosedListener (OnClosedListener );
Set the shadow sm. setSecondaryShadowDrawable (R. drawable. shadowright) on the left and right sides of the menu, and set sm. setSecondaryMenu (R. layout. menu_frame2) on the right );

I can't see it anymore. Let's just look at the picture.




3. Apply SlidingMenu1.Activity to implement SlidingMenu

// Instantiate a SlidingMenuslidingMenu = new SlidingMenu (this); // set it to slidingMenu in the left-side slide mode. setMode (SlidingMenu. LEFT); // set the full screen trigger to slide slidingMenu. setTouchModeAbove (sregistringmenu. TOUCHMODE_FULLSCREEN); // sets the shadow effect slidingMenu. setShadowDrawable (R. drawable. shadow); // set the shadow width slidingMenu. setShadowWidth (3); // set the remaining width slidingMenu displayed on the home page when sliding out. setBehindOffset (10); // you can specify the slidingMenu. setBehindWidth (350); // sets the slidingMenu for fade-in and fade-out. setFadeDegree (0.35f); // The setting is attached to ActivityslidingMenu. attachToActivity (this, SlidingMenu. SLIDING_CONTENT); // you can specify slidingMenu for the left-side slide menu. setMenu (R. layout. slidingmenu_test );

2. Click transaction in SlidingMenu

Because the SlidingMenu has been included in the Activity, you can directly findViewById (id). After obtaining the view, you can process the response.

In fact, it can be seen from the Slidingmenu source code that it is generally with ActionBarSherlock, Fragment, SO the main layout is a title + Fragment SO -------- I used a Framelayout + custom title

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <com.qf.teach.project.zhihudaily.custom.CustomTitle        android:id="@+id/custom_title"        android:layout_width="match_parent"        android:layout_height="60dp" />    <FrameLayout        android:id="@+id/fl_content"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

4. Do not know the custom title. Do not remember the custom title. First, you must inherit one thing, and then rewrite the constructor with two parameters to fill in the layout, then define a method you need. Now we need a method to set the title text.

Package com. qf. teach. project. zhihudaily. custom; import android. content. context; import android. util. attributeSet; import android. view. layoutInflater; import android. widget. frameLayout; import android. widget. textView; import com. qf. teach. project. zhihudaily. r;/*** custom title * @ author Lusifer ** 2:32:33, December 3, December 1, 2014 */public class CustomTitle extends FrameLayout {private TextView txTitle; public CustomTitle (Context context, AttributeSet attrs) {super (context, attrs); // bind the LayoutInflater layout. from (context ). inflate (R. layout. custom_title, this); initView ();} private void initView () {txTitle = (TextView) findViewById (R. id. tx_title);} public void setTitle (String title) {txTitle. setText (title );}}

Return to the java code ③ since Fragment is used in the initialization interface, our activity inherits FragmentActivity and replaces Framelayout with Fragment.
I. initialize Components

/*** Fragment interface */private void initView () {cTitle = (CustomTitle) findViewById (R. id. custom_title); cTitle. setTitle ("Homepage"); cTitle. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// slidingmenu dynamically determines that the menu is automatically closed or enabled. toggle () ;}}); FragmentTransaction fragmentTransaction = getSupportFragmentManager (). beginTransaction (); fragmentTransaction. replace (R. id. fl_content, MainFragment. newInstance (); fragmentTransaction. commit ();}

Ii. initialize Slidingmenu. I believe that after the above explanation, we should all know how to apply Slidingmenu. Let's look at the Slidingmenu interface first. In fact, it also needs to load data.



In this example, a listview needs to obtain the list data.

/*** Initialize SlidingMenu */private void initSlidingMenu () {mQueue = Volley. newRequestQueue (getApplicationContext (); // menu = new SlidingMenu (this); menu. setMode (SlidingMenu. LEFT); menu. setTouchModeAbove (sregistringmenu. TOUCHMODE_MARGIN); menu. setShadowWidth (10); menu. setShadowDrawable (R. drawable. shadow); menu. setBehindOffset (100); menu. setFadeDegree (0.35f); menu. attachToActivity (this, SlidingMenu. SLIDING_CONTENT); menu. setMenu (R. layout. sliding_left); // topic adapter = new MyBaseAdapter (); // listview load data lvTheme = (ListView) findViewById (R. id. lv_theme); lvTheme. setOnItemClickListener (this); lvTheme. setAdapter (adapter); mQueue. add (new JsonObjectRequest (Method. GET, API. getThemesUrl (), null, this, null ));}

I believe everyone can understand the code in the above menu. The theme below, that is, the things in the Slidingmenu, needs to be networked and the data will be taken down and filled into the Baseadapter (1) use volly for online request data to get json
Note that the above two sentences, in fact, the real URL is no longer in the java code, but in jni, even if the decompilation fails ..............

mQueue = Volley.newRequestQueue(getApplicationContext());

mQueue.add(new JsonObjectRequest(Method.GET, API.getThemesUrl(), null, this, null));

Let's take a look at the json structure. The outermost layer is a braces. Therefore, vally uses jsonobject to believe that json parsing will continue.


According to the json structure, first create an object class with two Arrays: SO

package com.qf.teach.project.zhihudaily.entity;import java.util.List;public class Theme {private int limit;private List<ThemeOther> others;public int getLimit() {return limit;}public void setLimit(int limit) {this.limit = limit;}public List<ThemeOther> getOthers() {return others;}public void setOthers(List<ThemeOther> others) {this.others = others;}}

package com.qf.teach.project.zhihudaily.entity;public class ThemeOther {private int color;private String image;private String description;private long id;private String name;public int getColor() {return color;}public void setColor(int color) {this.color = color;}public String getImage() {return image;}public void setImage(String image) {this.image = image;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public long getId() {return id;}public void setId(long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}}

/* -------------------- Network request ------------------ */@ Overridepublic void onResponse (JSONObject response) {theme = new Theme (); try {theme. setLimit (response. getInt ("limit"); // parse OthersJSONArray jsonArray = response. getJSONArray ("others"); if (jsonArray! = Null & jsonArray. length ()> 0) {List <ThemeOther> others = new ArrayList <ThemeOther> (); // manually add the Home Page ThemeOther other = new ThemeOther (); other. setName ("Homepage"); others. add (other); // parse for (int I = 0; I <jsonArray. length (); I ++) {JSONObject obj = jsonArray. getJSONObject (I); other = new ThemeOther (); other. setColor (obj. getInt ("color"); other. setDescription (obj. getString ("description"); other. setId (obj. getLong ("id"); other. setImage (obj. getString ("image"); other. setName (obj. getString ("name"); others. add (other);} theme. setOthers (others); adapter. notifyDataSetChanged () ;}} catch (JSONException e) {e. printStackTrace () ;}/ * -------------------- network request --------------------*/

(2) instantiate the Adapter and fill in the data adapter. The Adapter is actually written in the mainactivity class, so the value passing problem can be omitted. The Listview is also optimized, for example, convertView is reused to reduce the number of times the system findByid is used.

/*** ThemeAdapter * @ author Lusifer ** December 4, 2014 2:11:55 */class MyBaseAdapter extends BaseAdapter {private ViewHolder viewHolder; @ Overridepublic int getCount () {return theme = null? 0: theme. getOthers (). size () ;}@ Overridepublic Object getItem (int position) {return theme. getOthers (). get (position) ;}@ Overridepublic long getItemId (int position) {return position ;}@ Overridepublic View getView (int position, View convertView, ViewGroup parent) {if (convertView = null) {convertView = LayoutInflater. from (MainActivity. this ). inflate (R. layout. list_theme, parent, false); viewHolder = new ViewHolder (); viewHolder. txTitle = (TextView) convertView. findViewById (R. id. tx_title); convertView. setTag (viewHolder);} else {viewHolder = (ViewHolder) convertView. getTag ();} ThemeOther other = theme. getOthers (). get (position); viewHolder. txTitle. setText (other. getName (); return convertView;} class ViewHolder {public TextView txTitle ;}}

OK. The data in Slidingmenu is filled.
End