項目實戰①—高仿知乎日報（2）—>使用pullrefesh+Slidingmenu+自訂群組件寫主布局2，extjs自訂群組件

項目實戰①—高仿知乎日報（2）—>使用pullrefesh+Slidingmenu+自訂群組件寫主布局2，extjs自訂群組件

在這一篇開頭我要感謝我的老師李衛民同志，沒有他這個東西做不出來，有了他這個Demo逼近真正的XX日報

現在淩晨了，似乎大腦更加清晰了，有助於我清理下思路，繼續寫完我的部落格，上一節講完了，Slidingmenu的內容填充，既然將內容填充好了，似乎要加點樂子，那就是listview的點擊事件。

① listview的點擊事件處理原本以為首頁的資料和 其他頁面的資料是一樣的也就是我想用一個Fragment將所有的資料都寫在裡面 ，看來是不可能的了。我先不寫主布局的Fragment 因為裡面藏著一個自訂的一個類，先寫其他頁面的資料可以從易到難慢慢來

/* -------------------- ListView點擊事件 -------------------- */@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {// 關閉側滑菜單menu.toggle();if (position == 0) { // 進入首頁initView();} else {// 填充FragmentThemeOther other = theme.getOthers().get(position);cTitle.setTitle(other.getName());FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();fragmentTransaction.replace(R.id.fl_content, ContentFragment.newInstance(other.getId(), other.getDescription(), other.getImage()));fragmentTransaction.commit();}}

其實只是一個主布局的Framlayout在變 所以我們可以先將 標題給變了，然後再將需要傳遞的ID （拼接URL）description （Fragment）的標題  image Fragment最上面的圖片 這麼說有點抽象 看看布局吧

是不是一目瞭然，和我說的一樣，主要了 在Fragment裡面 傳值不要用構造方法 的bundle 這樣會使Fragment 很多東西不能實現   要改一種方式 newInstance

②Fragment的代碼實現對於Fragment 最一開始感覺挺不適應他的，因為總是和Viewpage一起出現，然後本來一個一個出現比較簡單，一起出現我就懵了，後面越用用方便，最後發現其實 activity用的越來越少了......................它的生命週期很重要......一獲得從activity傳來的資料

public static ContentFragment newInstance(long id, String description, String image) {ContentFragment f = new ContentFragment();Bundle args = new Bundle();args.putLong("id", id);args.putString("description", description);args.putString("image", image);f.setArguments(args);return f;}

二 在 Oncreate 裡面將資料準備好

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);id = getArguments().getLong("id");description = getArguments().getString("description");image = getArguments().getString("image");mQueue = Volley.newRequestQueue(getActivity());}

二 在OncreateView裡面初始化介面當然首先要在裡面填充一個布局羅，其實你看下Activity的源碼 其實setContentView是和Fragment的 inflate 是相差不大的

View view = inflater.inflate(R.layout.fragment_content, container, false);

我給大家看看布局吧 免得下面的介面命名看不懂 

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ScrollView        android:id="@+id/sv_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        tools:ignore="UselessLeaf,UselessParent" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <RelativeLayout                android:layout_width="match_parent"                android:layout_height="200dp"                tools:ignore="UselessLeaf,UselessParent" >                <com.android.volley.toolbox.NetworkImageView                    android:id="@+id/img_content"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:scaleType="centerCrop"                    tools:ignore="ContentDescription" />                <TextView                    android:id="@+id/tx_desc"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_alignParentBottom="true"                    android:layout_marginTop="10dp"                    android:padding="10dp"                    android:textColor="#FFFFFF"                    android:textSize="18sp" />            </RelativeLayout>            <com.qf.teach.project.zhihudaily.custom.CustomListViewForScrollView                android:id="@+id/lv_theme"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:divider="#EEEEEE"                android:dividerHeight="5dp"                android:padding="10dp" />        </LinearLayout>    </ScrollView></LinearLayout>

裡面有一個自定的listview 目的是解決和ScrollView搶焦點的問題

package com.qf.teach.project.zhihudaily.custom;import android.content.Context;import android.util.AttributeSet;import android.widget.ListView;public class CustomListViewForScrollView extends ListView {public CustomListViewForScrollView(Context context) {super(context);}public CustomListViewForScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public CustomListViewForScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, expandSpec);}}

回到java 代碼....................

/**初始化介面 * @param view */private void initView(View view) {//設定廣告網頁標題txDesc = (TextView) view.findViewById(R.id.tx_desc);txDesc.setText(description);//設定廣告頁的圖片imgContent = (NetworkImageView) view.findViewById(R.id.img_content);imgContent.setImageUrl(image, new ImageLoader(mQueue, new BitmapCache()));adapter = new MyBaseAdapter();//自訂listviewlvTheme = (CustomListViewForScrollView) view.findViewById(R.id.lv_theme);lvTheme.setOnItemClickListener(this);lvTheme.setAdapter(adapter);svContent = (ScrollView) view.findViewById(R.id.sv_content);}

三初始化資料—利用volly連網得到json

/** * 初始化資料 */private void initData() {mQueue.add(new JsonObjectRequest(Method.GET, String.format(API.getTheme(), id), null, this, null));}

我們先看看json結構吧 相信大家json解析都會 我就不敘述了

其中的Stringformat 我在前面已經說過 利用預留位置 將後面的參數ID傳進，拼接字串

/* -------------------- 網路請求 -------------------- */@Overridepublic void onResponse(JSONObject response) {try {themeStory = new ThemeStory();themeStory.setDescription(response.getString("description"));themeStory.setBackground(response.getString("background"));themeStory.setImage(response.getString("image"));themeStory.setColor(response.getInt("color"));themeStory.setImage_source(response.getString("image_source"));themeStory.setName(response.getString("name"));// 解析storiesJSONArray arrayStories = response.getJSONArray("stories");if (arrayStories != null && arrayStories.length() > 0) {List<Story> stories = new ArrayList<Story>();for (int i = 0 ; i < arrayStories.length() ; i++) {JSONObject obj = arrayStories.getJSONObject(i);Story story = new Story();story.setType(obj.getInt("type"));story.setId(obj.getLong("id"));story.setShare_url(obj.getString("share_url"));story.setTitle(obj.getString("title"));if (obj.has("multipic")) {story.setMultipic(obj.getBoolean("multipic"));}// 圖片數組if (obj.has("images")) {JSONArray array = obj.getJSONArray("images");if (array != null && array.length() > 0) {String[] images = new String[array.length()];for (int x = 0 ; x < array.length() ; x++) {images[x] = array.getString(x);}story.setImages(images);}}stories.add(story);}themeStory.setStories(stories);}// 解析editorsJSONArray arrayEditors = response.getJSONArray("editors");if (arrayEditors != null && arrayEditors.length() > 0) {List<Editor> editors = new ArrayList<Editor>();for (int i = 0 ; i < arrayEditors.length() ; i++) {JSONObject obj = arrayEditors.getJSONObject(i);Editor editor = new Editor();editor.setAvatar(obj.getString("avatar"));editor.setId(obj.getLong("id"));editor.setName(obj.getString("name"));editors.add(editor);}themeStory.setEditors(editors);}// 因為考慮到 URl會變所以我們通知數據發生改變adapter.notifyDataSetChanged();//解決一開始進來不在最上面的問題svContent.smoothScrollTo(0, 0);} catch (JSONException e) {e.printStackTrace();}}

四 填充adapter裡面的資料沒啥好說的 看代碼吧

/* -------------------- 網路請求 -------------------- */class MyBaseAdapter extends BaseAdapter {private ViewHolder viewHolder;@Overridepublic int getCount() {return themeStory == null ? 0 : themeStory.getStories().size();}@Overridepublic Object getItem(int position) {return themeStory.getStories().get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {if (convertView == null) {convertView = LayoutInflater.from(getActivity()).inflate(R.layout.list_theme_news, parent, false);viewHolder = new ViewHolder();viewHolder.txTitle = (TextView) convertView.findViewById(R.id.tx_title);viewHolder.imgThumb = (NetworkImageView) convertView.findViewById(R.id.img_thumb);convertView.setTag(viewHolder);} else {viewHolder = (ViewHolder) convertView.getTag();}Story story = themeStory.getStories().get(position);viewHolder.txTitle.setText(story.getTitle());viewHolder.imgThumb.setVisibility(View.GONE);if (story.getImages() != null && story.getImages().length > 0) {viewHolder.imgThumb.setImageUrl(story.getImages()[0], new ImageLoader(mQueue, new BitmapCache()));viewHolder.imgThumb.setVisibility(View.VISIBLE);}return convertView;}class ViewHolder {public TextView txTitle;public NetworkImageView imgThumb;}}