高仿網易評論列表效果之介面生成(三)

yangxi_001發表於2016-01-11

前兩節我們分別分析了網易評論列表介面和生成一些我們需要的測試資料，生成測試資料那段如果大家看著看得頭疼沒關係，直接調業務物件中的方法生成資料即可不必理會我是怎麼處理的，接下來的對於大家來說才是讓各位感興趣的東西。

介面分析了、資料也有了，那我們如何實現這樣的一個介面呢？首先我們來看一下整個專案的結構圖大致瞭解下：


MainActivity是該應用的入口Activity，裡面就對ActionBar和Fragment做了一些初始化：

[java] view plaincopyprint?
  1. package com.aigestudio.neteasecommentlistdemo.activities;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v7.app.ActionBar;  
  5. import android.support.v7.app.ActionBarActivity;  
  6.   
  7. import com.aigestudio.neteasecommentlistdemo.R;  
  8. import com.aigestudio.neteasecommentlistdemo.bo.SQLiteDataBO;  
  9. import com.aigestudio.neteasecommentlistdemo.fragment.CommentFragment;  
  10.   
  11. /** 
  12.  * 應用的入口Activity 
  13.  * 沒有做太多的邏輯，除了ActionBar所有的介面元素都整合在Fragment中 
  14.  * 
  15.  * @author Aige 
  16.  * @since 2014/11/14 
  17.  */  
  18. public class MainActivity extends ActionBarActivity {  
  19.     private ActionBar actionBar;//狀態列  
  20.   
  21.     private SQLiteDataBO sqLiteDataBO;//資料業務物件  
  22.   
  23.     @Override  
  24.     protected void onCreate(Bundle savedInstanceState) {  
  25.         super.onCreate(savedInstanceState);  
  26.         setContentView(R.layout.activity_main);  
  27.   
  28.         //初始化控制元件  
  29.         initWidget();  
  30.   
  31.         //初始化資料：一次即可，如果你clean了專案需要重新生成資料，生成資料前前註釋掉上面的initWidget()初始化控制元件方法  
  32. //        sqLiteDataBO = new SQLiteDataBO(this);  
  33. //        sqLiteDataBO.initServerData();  
  34.     }  
  35.   
  36.     /** 
  37.      * 初始化控制元件 
  38.      */  
  39.     private void initWidget() {  
  40.         //初始化ActionBar  
  41.         initActionBar();  
  42.   
  43.         //設定當前顯示的Fragment  
  44.         getSupportFragmentManager().beginTransaction().add(R.id.container, new CommentFragment()).commit();  
  45.     }  
  46.   
  47.     /** 
  48.      * 初始化ActionBar 
  49.      */  
  50.     private void initActionBar() {  
  51.         actionBar = getSupportActionBar();  
  52.         actionBar.setDisplayShowTitleEnabled(false);  
  53.         actionBar.setDisplayShowHomeEnabled(true);  
  54.         actionBar.setHomeButtonEnabled(true);  
  55.         actionBar.setDisplayHomeAsUpEnabled(true);  
  56.     }  
  57. }  
重點在CommentFragment類裡面，在該類裡面我們獲取資料庫的資料並將其傳入Adapter
[java] view plaincopyprint?
  1. package com.aigestudio.neteasecommentlistdemo.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.annotation.Nullable;  
  5. import android.support.v4.app.Fragment;  
  6. import android.util.Log;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.BaseAdapter;  
  11. import android.widget.ListView;  
  12.   
  13. import com.aigestudio.neteasecommentlistdemo.R;  
  14. import com.aigestudio.neteasecommentlistdemo.beans.Post;  
  15. import com.aigestudio.neteasecommentlistdemo.bo.CommentFMBO;  
  16. import com.aigestudio.neteasecommentlistdemo.dao.ServerDAO;  
  17. import com.aigestudio.neteasecommentlistdemo.views.PostView;  
  18.   
  19. import java.util.ArrayList;  
  20. import java.util.HashSet;  
  21. import java.util.List;  
  22. import java.util.Map;  
  23.   
  24. /** 
  25.  * 唯一的一個Fragment用來顯示介面 
  26.  * 
  27.  * @author Aige 
  28.  * @since 2014/11/14 
  29.  */  
  30. public class CommentFragment extends Fragment {  
  31.     private ListView lvContent;//填充內容的List列表  
  32.   
  33.     private ServerDAO serverDAO;//伺服器資料的訪問物件  
  34.     private CommentFMBO commentFMBO;//業務物件  
  35.   
  36.     private List<Post> posts;//儲存帖子的列表  
  37.   
  38.     @Override  
  39.     public void onCreate(Bundle savedInstanceState) {  
  40.         super.onCreate(savedInstanceState);  
  41.   
  42.         //初始化伺服器資料庫DAO  
  43.         serverDAO = new ServerDAO(getActivity());  
  44.   
  45.         //初始化儲存帖子的列表  
  46.         posts = new ArrayList<Post>();  
  47.   
  48.         //初始化業務物件  
  49.         commentFMBO = new CommentFMBO(serverDAO);  
  50.     }  
  51.   
  52.     @Override  
  53.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  54.         //獲取根佈局  
  55.         View rootView = inflater.inflate(R.layout.fragment_comment, container, false);  
  56.   
  57.         //獲取ListView控制元件  
  58.         lvContent = (ListView) rootView.findViewById(R.id.comment_fm_content_lv);  
  59.   
  60.         //初始化資料  
  61.         initData();  
  62.         return rootView;  
  63.     }  
  64.   
  65.     /** 
  66.      * 初始化資料 
  67.      * <p/> 
  68.      * 注：資料的載入方式非按實際方式以遠端伺服器非同步載入，So……別鑽空子~~ 
  69.      */  
  70.     private void <span style="color:#990000;"><strong>initData</strong></span>() {  
  71.         //查詢贊前十的帖子  
  72.         List<Map<String, String>> praiseTop10Post = serverDAO.queryMulti("user_praise", new String[]{"postFlag"}, null, null, "postFlag", null, "count(postFlag) desc", "10");  
  73. //        List<Map<String, String>> praiseTop10Post = serverDAO.queryMulti("select postFlag from user_praise group by postFlag order by count(postFlag) desc limit 10");  
  74.   
  75.         //查詢Post資料  
  76.         posts = commentFMBO.queryPost(praiseTop10Post, "postFlag", posts, Post.Type.HOTTEST);  
  77.   
  78.         //查詢最新的十條帖子資料  
  79.         List<Map<String, String>> newestTop10Posts = serverDAO.queryMulti("post", new String[]{"flag"}, null, null, null, null, "_id desc", "10");  
  80. //        List<Map<String, String>> newestTop10Posts = serverDAO.queryMulti("select flag from post order by count(_id) desc limit 10");  
  81.   
  82.         //查詢Post資料  
  83.         posts = commentFMBO.queryPost(newestTop10Posts, "flag", posts, Post.Type.NEWEST);  
  84.   
  85.         //資料驗證  
  86. //        commentFMBO.verifyData(posts);  
  87.         //資料載入  
  88.         lvContent.setAdapter(new CommentAdapter(posts));  
  89.     }  
  90.   
  91.     private class CommentAdapter extends BaseAdapter {  
  92.         private List<Post> posts;  
  93.   
  94.         private CommentAdapter(List<Post> posts) {  
  95.             this.posts = posts;  
  96.         }  
  97.   
  98.         @Override  
  99.         public int getCount() {  
  100.             return posts.size();  
  101.         }  
  102.   
  103.         @Override  
  104.         public Object getItem(int position) {  
  105.             return null;  
  106.         }  
  107.   
  108.         @Override  
  109.         public long getItemId(int position) {  
  110.             return 0;  
  111.         }  
  112.   
  113.         @Override  
  114.         public View getView(int position, View convertView, ViewGroup parent) {  
  115.             if (null==convertView){  
  116.                 convertView = new PostView(getActivity());  
  117.             }  
  118.             ((PostView)convertView).setPost(posts.get(position));  
  119.             return convertView;  
  120.         }  
  121.     }  
  122. }  
該類的程式碼並不多，主要的無非initData()方法中資料的獲取封裝，其內部邏輯我們也封裝在了對應的業務物件CommentFMBO中，CommentFMBO對外公佈的方法也就兩個：一個用來查詢Post資料的List<Post> queryPost(List<Map<String, String>> postList, String key, List<Post> posts, Post.Type type)方法和一個用來驗證資料的verifyData(List<Post> posts)方法，其中驗證資料的方法是我們在生成資料後對資料正確性的一個測試，所以真正對我們有用的方法就一個queryPost：

[java] view plaincopyprint?
  1. /** 
  2.  * 查詢Post資料 
  3.  * 
  4.  * @param postList Post資料來源 
  5.  */  
  6. public List<Post> queryPost(List<Map<String, String>> postList, String key, List<Post> posts, Post.Type type) {  
  7.     for (int i = 0; i < postList.size(); i++) {  
  8.         //例項化一個Post物件  
  9.         Post post = new Post();  
  10.   
  11.         /* 
  12.         判斷帖子的型別是否為最新的或最熱的，如果是則將第一條帖子的Type設定為相應型別 
  13.          */  
  14.         if (type != Post.Type.NORMAL && i == 0) {  
  15.             post.setType(type);  
  16.         } else {  
  17.             post.setType(Post.Type.NORMAL);  
  18.         }  
  19.   
  20.         //設定該Post的標識值  
  21.         post.setFlag(postList.get(i).get(key));  
  22.   
  23.         //設定該Post的建立時間  
  24.         String createAt = serverDAO.queryValue("post", new String[]{"createAt"}, "flag", post.getFlag());  
  25. //                String createAt = serverDAO.queryValue("select createAt from post where flag like " + post.getFlag());  
  26.         post.setCreateAt(createAt);  
  27.   
  28.         //設定該Post的評論列表  
  29.         List<Comment> comments = getComments(postList, i, key);  
  30.         post.setComments(comments);  
  31.   
  32.         //設定該Post讚的User列表  
  33.         List<User> praises = getUserPraises(postList, i, key);  
  34.         post.setUserPraises(praises);  
  35.   
  36.         //設定該Post踩的User列表  
  37.         List<User> unPraises = getUserUnPraises(postList, i, key);  
  38.         post.setUserUnPraises(unPraises);  
  39.   
  40.         //設定該Post收藏的User列表  
  41.         List<User> collects = getUserCollects(postList, i, key);  
  42.         post.setUserCollects(collects);  
  43.   
  44.         posts.add(post);  
  45.     }  
  46.     return posts;  
  47. }  
CommentFMBO類中其他的一些實現有興趣大家可以看我公佈的原始碼這裡就不多說了。在拿到Post列表後我們就將其通過CommentAdapter的建構函式注入CommentAdapter，而在CommentAdapter的getView中我們的邏輯也非常簡單：
[java] view plaincopyprint?
  1. @Override  
  2. public View getView(int position, View convertView, ViewGroup parent) {  
  3.     if (null==convertView){  
  4.         convertView = new PostView(getActivity());  
  5.     }  
  6.     ((PostView)convertView).setPost(posts.get(position));  
  7.     return convertView;  
  8. }  
這段程式碼相信大家一看就懂，convertView為空時我們才去new一個自定義的PostView控制元件否則直接調PostView控制元件中的setPost方法去設定資料，不知道大家在看這段程式碼的時候有沒有這樣一個疑問，為什麼不通過PostView的建構函式注入資料呢？為什麼要單獨給出一個方法來設定資料？大家可以自己思考下。下面我們來看看自定義控制元件PostView中有些什麼東西：

[java] view plaincopyprint?
  1. package com.aigestudio.neteasecommentlistdemo.views;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.content.Context;  
  5. import android.util.AttributeSet;  
  6. import android.view.LayoutInflater;  
  7. import android.widget.LinearLayout;  
  8. import android.widget.TextView;  
  9.   
  10. import com.aigestudio.neteasecommentlistdemo.R;  
  11. import com.aigestudio.neteasecommentlistdemo.beans.Comment;  
  12. import com.aigestudio.neteasecommentlistdemo.beans.Post;  
  13.   
  14. import java.util.List;  
  15.   
  16. /** 
  17.  * 用來顯示Post的自定義控制元件 
  18.  * 
  19.  * @author Aige 
  20.  * @since 2014/11/14 
  21.  */  
  22. public class PostView extends LinearLayout {  
  23.     private TextView tvType, tvUserName, tvLocation, tvDate, tvPraise, tvContent;//依次為顯示型別標籤、使用者名稱、地理位置、日期、贊資料和最後一條評論內容的TextView  
  24.     private CircleImageView civNick;//使用者圓形頭像顯示控制元件  
  25.     private FloorView floorView;//蓋樓控制元件  
  26.   
  27.     public PostView(Context context) {  
  28.         this(context, null);  
  29.     }  
  30.   
  31.     public PostView(Context context, AttributeSet attrs) {  
  32.         this(context, attrs, 0);  
  33.     }  
  34.   
  35.     @SuppressLint("NewApi")  
  36.     public PostView(Context context, AttributeSet attrs, int defStyleAttr) {  
  37.         super(context, attrs, defStyleAttr);  
  38.   
  39.         //初始化控制元件  
  40.         initWidget(context);  
  41.     }  
  42.   
  43.     /** 
  44.      * 初始化控制元件 
  45.      * 
  46.      * @param context 上下文環境引用 
  47.      */  
  48.     private void initWidget(Context context) {  
  49.         //設定佈局  
  50.         LayoutInflater.from(context).inflate(R.layout.view_post, this);  
  51.   
  52.         //獲取控制元件  
  53.         tvType = (TextView) findViewById(R.id.view_post_type_tv);  
  54.         tvUserName = (TextView) findViewById(R.id.view_post_username_tv);  
  55.         tvLocation = (TextView) findViewById(R.id.view_post_location_tv);  
  56.         tvDate = (TextView) findViewById(R.id.view_post_date_tv);  
  57.         tvPraise = (TextView) findViewById(R.id.view_post_praise_tv);  
  58.         tvContent = (TextView) findViewById(R.id.view_post_content_tv);  
  59.   
  60.         civNick = (CircleImageView) findViewById(R.id.view_post_nick_civ);  
  61.   
  62.         floorView = (FloorView) findViewById(R.id.view_post_floor_fv);  
  63.     }  
  64.   
  65.     /** 
  66.      * 為PostView設定資料 
  67.      * 
  68.      * @param post 資料來源 
  69.      */  
  70.     public void setPost(Post post) {  
  71.         //設定Post的型別  
  72.         setType(post);  
  73.   
  74.         //設定Post的贊資料  
  75.         setPraise(post);  
  76.   
  77.         //獲取該條帖子下的評論列表  
  78.         List<Comment> comments = post.getComments();  
  79.   
  80.         /* 
  81.         判斷評論長度 
  82.         1.如果只有一條評論那麼則顯示該評論即可並隱藏蓋樓佈局 
  83.         2.否則我們進行蓋樓顯示 
  84.          */  
  85.         if (comments.size() == 1) {  
  86.             floorView.setVisibility(GONE);  
  87.   
  88.             Comment comment = comments.get(0);  
  89.   
  90.             //設定控制元件顯示資料  
  91.             initUserDate(comment);  
  92.         } else {  
  93.             //蓋樓前我們要把最後一條評論資料提出來顯示在Post最外層  
  94.             int index = comments.size() - 1;  
  95.             Comment comment = comments.get(index);  
  96.   
  97.             //設定控制元件顯示資料  
  98.             initUserDate(comment);  
  99.   
  100.             floorView.setComments(comments);  
  101.         }  
  102.     }  
  103.   
  104.     /** 
  105.      * 設定與使用者相關的控制元件資料顯示 
  106.      * 
  107.      * @param comment 評論物件 
  108.      */  
  109.     private void initUserDate(Comment comment) {  
  110.         tvContent.setText(comment.getContent());  
  111.         tvDate.setText(comment.getCreateAt());  
  112.         tvUserName.setText(comment.getUser().getUserName());  
  113.         tvLocation.setText(comment.getUser().getLocation());  
  114.         civNick.setImageResource(Integer.parseInt(comment.getUser().getNick()));  
  115.     }  
  116.   
  117.     /** 
  118.      * 設定Post的贊資料 
  119.      * 
  120.      * @param post 資料來源 
  121.      */  
  122.     private void setPraise(Post post) {  
  123.         tvPraise.setText(post.getUserPraises().size() + "贊");  
  124.     }  
  125.   
  126.     /** 
  127.      * 設定Post的型別 
  128.      * 
  129.      * @param post 資料來源 
  130.      */  
  131.     private void setType(Post post) {  
  132.         //獲取Post型別  
  133.         Post.Type type = post.getType();  
  134.   
  135.         /* 
  136.         設定型別顯示 
  137.          */  
  138.         switch (type) {  
  139.             case NEWEST:  
  140.                 tvType.setVisibility(VISIBLE);  
  141.                 tvType.setText("最新跟帖");  
  142.                 break;  
  143.             case HOTTEST:  
  144.                 tvType.setVisibility(VISIBLE);  
  145.                 tvType.setText("熱門跟帖");  
  146.                 break;  
  147.             case NORMAL:  
  148.                 tvType.setVisibility(GONE);  
  149.                 break;  
  150.         }  
  151.     }  
  152. }  
PostView是一個繼承於LinearLayout的複合控制元件，裡面我們設定了一個佈局，佈局的xml我就不貼出來了，可以給大家看下該佈局的效果如下：

在PostView被例項化的時候我們就在initWidget(Context context)方法中初始化其佈局，而設定其PostView顯示資料的方法我們獨立在setPost(Post post)方法中，說白了就是資料和顯示的分離，為什麼要這樣做？很簡單，即便我當前的PostView被重用了，我也可以通過setPost(Post post)方法重新設定我們的資料而不需要重新再例項化一個PostView也不用擔心PostView在Item中順序混淆，更不用擔心多次地去findView造成的效率問題，因為findView的過程只在例項化的時候才會去做，設定資料不需要再管。

在setPost(Post post)方法中除了獲取封裝的資料並設定PostView上各控制元件的顯示資料外我們還要進行Comment的判斷：

[java] view plaincopyprint?
  1. /* 
  2. 判斷評論長度 
  3. 1.如果只有一條評論那麼則顯示該評論即可並隱藏蓋樓佈局 
  4. 2.否則我們進行蓋樓顯示 
  5.  */  
  6. if (comments.size() == 1) {  
  7.     floorView.setVisibility(GONE);  
  8.   
  9.     Comment comment = comments.get(0);  
  10.   
  11.     //設定控制元件顯示資料  
  12.     initUserDate(comment);  
  13. } else {  
  14.     //蓋樓前我們要把最後一條評論資料提出來顯示在Post最外層  
  15.     int index = comments.size() - 1;  
  16.     Comment comment = comments.get(index);  
  17.   
  18.     //設定控制元件顯示資料  
  19.     initUserDate(comment);  
  20.   
  21.     floorView.setComments(comments);  
  22. }  
如程式碼所示，當評論只有一條時我們就不顯示蓋樓了，如果評論大於一條那麼我們就要顯示蓋樓的FloorView，但是我們會先把評論中最後一條資料提取出來顯示在PostView上。蓋樓的控制元件FloorView也是一個複合控制元件，蓋樓的原理很簡單，資料我們自上而下按時間順序（我按的_id，懶得去計算時間了~~）依次顯示，FloorView繪製子View前我們先把整個蓋樓層疊效果的背景畫出來，然後再讓FloorView去繪製子View：

[java] view plaincopyprint?
  1. package com.aigestudio.neteasecommentlistdemo.views;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.content.Context;  
  5. import android.graphics.Canvas;  
  6. import android.graphics.drawable.Drawable;  
  7. import android.util.AttributeSet;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.widget.LinearLayout;  
  11. import android.widget.TextView;  
  12.   
  13. import com.aigestudio.neteasecommentlistdemo.R;  
  14. import com.aigestudio.neteasecommentlistdemo.beans.Comment;  
  15. import com.aigestudio.neteasecommentlistdemo.beans.User;  
  16.   
  17. import java.util.List;  
  18.   
  19. /** 
  20.  * 用來顯示PostView中蓋樓的自定義控制元件 
  21.  * 
  22.  * @author Aige 
  23.  * @since 2014/11/14 
  24.  */  
  25. public class FloorView extends LinearLayout {  
  26.     private Context context;//上下文環境引用  
  27.   
  28.     private Drawable drawable;//背景Drawable  
  29.   
  30.     public FloorView(Context context) {  
  31.         this(context, null);  
  32.     }  
  33.   
  34.     public FloorView(Context context, AttributeSet attrs) {  
  35.         this(context, attrs, 0);  
  36.     }  
  37.   
  38.     @SuppressLint("NewApi")  
  39.     public FloorView(Context context, AttributeSet attrs, int defStyleAttr) {  
  40.         super(context, attrs, defStyleAttr);  
  41.         this.context = context;  
  42.   
  43.         //獲取背景Drawable的資原始檔  
  44.         drawable = context.getResources().getDrawable(R.drawable.view_post_comment_bg);  
  45.     }  
  46.   
  47.     /** 
  48.      * 設定Comment資料 
  49.      * 
  50.      * @param comments Comment資料列表 
  51.      */  
  52.     public void setComments(List<Comment> comments) {  
  53.         //清除子View  
  54.         removeAllViews();  
  55.   
  56.         //獲取評論數  
  57.         int count = comments.size();  
  58.   
  59.         /* 
  60.         如果評論條數小於9條則直接顯示，否則我們只顯示評論的頭兩條和最後一條（這裡的最後一條是相對於PostView中已經顯示的一條評論來說的） 
  61.          */  
  62.         if (count < 9) {  
  63.             initViewWithAll(comments);  
  64.         } else {  
  65.             initViewWithHide(comments);  
  66.         }  
  67.     }  
  68.   
  69.     /** 
  70.      * 初始化所有的View 
  71.      * 
  72.      * @param comments 評論資料列表 
  73.      */  
  74.     private void initViewWithAll(List<Comment> comments) {  
  75.         for (int i = 0; i < comments.size() - 1; i++) {  
  76.             View commentView = getView(comments.get(i), i, comments.size() - 1, false);  
  77.             addView(commentView);  
  78.         }  
  79.     }  
  80.   
  81.     /** 
  82.      * 初始化帶有隱藏樓層的View 
  83.      * 
  84.      * @param comments 評論資料列表 
  85.      */  
  86.     private void initViewWithHide(final List<Comment> comments) {  
  87.         View commentView = null;  
  88.   
  89.         //初始化一樓  
  90.         commentView = getView(comments.get(0), 0, comments.size() - 1, false);  
  91.         addView(commentView);  
  92.   
  93.         //初始化二樓  
  94.         commentView = getView(comments.get(1), 1, comments.size() - 1, false);  
  95.         addView(commentView);  
  96.   
  97.         //初始化隱藏樓層標識  
  98.         commentView = getView(null, 2, comments.size() - 1, true);  
  99.         commentView.setOnClickListener(new OnClickListener() {  
  100.             @Override  
  101.             public void onClick(View v) {  
  102.                 initViewWithAll(comments);  
  103.             }  
  104.         });  
  105.         addView(commentView);  
  106.   
  107.         //初始化倒數第二樓  
  108.         commentView = getView(comments.get(comments.size() - 2), 3, comments.size() - 1, false);  
  109.         addView(commentView);  
  110.     }  
  111.   
  112.     /** 
  113.      * 獲取單個評論子檢視 
  114.      * 
  115.      * @param comment 評論物件 
  116.      * @param index   第幾個評論 
  117.      * @param count   總共有幾個評論 
  118.      * @param isHide  是否是隱藏顯示 
  119.      * @return 一個評論子檢視 
  120.      */  
  121.     private View getView(Comment comment, int index, int count, boolean isHide) {  
  122.         //獲取根佈局  
  123.         View commentView = LayoutInflater.from(context).inflate(R.layout.view_post_comment, null);  
  124.   
  125.         //獲取控制元件  
  126.         TextView tvUserName = (TextView) commentView.findViewById(R.id.view_post_comment_username_tv);  
  127.         TextView tvContent = (TextView) commentView.findViewById(R.id.view_post_comment_content_tv);  
  128.         TextView tvNum = (TextView) commentView.findViewById(R.id.view_post_comment_num_tv);  
  129.         TextView tvHide = (TextView) commentView.findViewById(R.id.view_post_comment_hide_tv);  
  130.   
  131.         /* 
  132.         判斷是否是隱藏樓層 
  133.          */  
  134.         if (isHide) {  
  135.             /* 
  136.             是則顯示“點選顯示隱藏樓層”控制元件而隱藏其他的不相干控制元件 
  137.              */  
  138.             tvUserName.setVisibility(GONE);  
  139.             tvContent.setVisibility(GONE);  
  140.             tvNum.setVisibility(GONE);  
  141.             tvHide.setVisibility(VISIBLE);  
  142.         } else {  
  143.             /* 
  144.             否則隱藏“點選顯示隱藏樓層”控制元件而顯示其他的不相干控制元件 
  145.              */  
  146.             tvUserName.setVisibility(VISIBLE);  
  147.             tvContent.setVisibility(VISIBLE);  
  148.             tvNum.setVisibility(VISIBLE);  
  149.             tvHide.setVisibility(GONE);  
  150.   
  151.             //獲取使用者物件  
  152.             User user = comment.getUser();  
  153.   
  154.             //設定顯示資料  
  155.             tvUserName.setText(user.getUserName());  
  156.             tvContent.setText(comment.getContent());  
  157.             tvNum.setText(String.valueOf(index + 1));  
  158.         }  
  159.   
  160.         //設定佈局引數  
  161.         LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);  
  162.   
  163.         //計算margin指數，這個指數的意義在於將第一個的margin值設定為最大的，然後依次遞減體現層疊效果  
  164.         int marginIndex = count - index;  
  165.         int margin = marginIndex * 3;  
  166.           
  167.         params.setMargins(margin, 0, margin, 0);  
  168.         commentView.setLayoutParams(params);  
  169.   
  170.         return commentView;  
  171.     }  
  172.   
  173.     @Override  
  174.     protected void dispatchDraw(Canvas canvas) {  
  175.         /* 
  176.         在FloorView繪製子控制元件前先繪製層疊的背景圖片 
  177.          */  
  178.         for (int i = getChildCount() - 1; i >= 0; i--) {  
  179.             View view = getChildAt(i);  
  180.             drawable.setBounds(view.getLeft(), view.getLeft(), view.getRight(), view.getBottom());  
  181.             drawable.draw(canvas);  
  182.         }  
  183.         super.dispatchDraw(canvas);  
  184.     }  
  185. }  
是不是很簡單呢？我相信稍有基礎的童鞋都能看懂，沒有複雜的邏輯沒有繁雜的計算過程，唯一的一個計算就是margin的計算，其原理也如程式碼註釋所說的那樣並不難，背景圖片的繪製使用了我們事先定義的一個drawable資源：

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <solid android:color="#222225"/>  
  4.     <stroke  
  5.         android:width="1px"  
  6.         android:color="#777775"/>  
  7. </shape>  
我依稀記得有個很逗的孩紙問我評論上的邊框是怎麼畫的…………。這裡要提醒大家一點就是在dispatchDraw方法中記得要先畫背景再去呼叫父類的super.dispatchDraw(canvas);方法去畫子View，不然就會出現背景把所有控制元件都遮擋的效果。這個背景是FloorView的，而不是單個子評論控制元件的，也就是說我們其實是做了個假象，繪製了這麼一張圖：

昨天有個童鞋問這樣的框框是如何畫的……首先我糾正，這一個框是一張背景Drawable而不是一個“框”，這張背景Drawable的外觀樣式是我們在xml檔案中預先定義好載入的：

[java] view plaincopyprint?
  1. //獲取背景Drawable的資原始檔  
  2. drawable = context.getResources().getDrawable(R.drawable.view_post_comment_bg);  
在一個ViewGroup（比如我們的FloorView extends LinearLayout）中我們通過dispatchDraw(Canvas canvas)方法來繪製子控制元件，在這之前ViewGroup會分別呼叫measureXXX和layout方法來分別測量和確定繪製自身和子控制元件的位置，具體的實現大家可以在網上找到一大堆相關的文章在這就不多說了。而在dispatchDraw方法中我們可以獲取到每個子View的大小和位置資訊，因為我們的FloorView是一個線性佈局，並且我們在xml中設定其排列方式為垂直排列的，每當我們往其中新增一個view這個view就會排列在上一個view下方：


在父容器measure和layout之後~~所有的子控制元件大小位置將被確定，我們可以得到子View相對於父控制元件的left、top、right和bottom：


回到我們的程式碼：

[java] view plaincopyprint?
  1. @Override  
  2. protected void dispatchDraw(Canvas canvas) {  
  3.     /* 
  4.     在FloorView繪製子控制元件前先繪製層疊的背景圖片 
  5.      */  
  6.     for (int i = getChildCount() - 1; i >= 0; i--) {  
  7.         View view = getChildAt(i);  
  8.         drawable.setBounds(view.getLeft(), view.getLeft(), view.getRight(), view.getBottom());  
  9.         drawable.draw(canvas);  
  10.     }  
  11.     super.dispatchDraw(canvas);  
  12. }  
我們首先獲取了最下方的那個子View，而在上面的margin計算中最下面的子View我們的margin=0；如果不考慮父控制元件的padding的話此時這個位於最下方的子View的getLeft()=0，也就是說其距離父控制元件左邊的距離為0，而倒數第二個子View的margin應該為3，getLeft()=3，倒數第三個子View的margin=6，getLeft()=6………………以此類推直至最上方的子View，我們在繪製背景的時候也是按照這樣的順序：最底層的drawable起始座標為x=getLeft(),y=getLeft()，也就是(0,0)，寬和高分別為view.getRight()和view.getBottom()，依次計算下去直至最後一個View~~~~~UnderStand？

這就是整個評論列表的實現過程，原始碼在此：傳送門，IDE為Studio，如果你用Eclipse，做一個程式碼的搬運工即可~

對於大家來說可能碼程式碼這一過程是最重要的，其實對於我來說，前期對實現的分析才是最重要的，如果分析得不對實現的過程就會巨繁瑣，舉個栗子如果我們在分析介面的時候得出每個Item中元素的關係為“評論—>回覆”結構，那麼不但我們的資料設計要繁瑣，介面的展示也難以得到我們想要的效果~~~~還是那句話，牛逼的體現不在於用複雜的技術實現複雜的效果，而是用簡單的方法得到複雜的效果~~~~

實現過程就是這樣，但是依然有一些不足，在這我留給大家兩個問題去思考下：

1.我們都知道findView是一個很耗時的過程，因為我們要從xml文件中解析出各個節點，解析xml文件是很廢時的，也正基於此，在我們自定義BaseAdapter的時候我們會在getView方法中通過一個ViewHolder物件儲存已經find的控制元件並複用他以此來提高效率。而在我們的FloorView的getView方法中我們會不斷地去從xml文件中解析控制元件：

[java] view plaincopyprint?
  1. private View getView(Comment comment, int index, int count, boolean isHide) {  
  2.     //獲取根佈局  
  3.     View commentView = LayoutInflater.from(context).inflate(R.layout.view_post_comment, null);  
  4.   
  5.     //獲取控制元件  
  6.     TextView tvUserName = (TextView) commentView.findViewById(R.id.view_post_comment_username_tv);  
  7.     TextView tvContent = (TextView) commentView.findViewById(R.id.view_post_comment_content_tv);  
  8.     TextView tvNum = (TextView) commentView.findViewById(R.id.view_post_comment_num_tv);  
  9.     TextView tvHide = (TextView) commentView.findViewById(R.id.view_post_comment_hide_tv);  
  10.   
  11.     /*………………………………………………………………………………………………………………………………………………………………*/  
  12.   
  13.     return commentView;  
  14. }  
這個過程是非常噁心的，我們是否也可以用一個物件來儲存它並實現複用呢？

2.在dispatchDraw中繪製背景圖的時候，我們會根據所有子View的location來繪製drawable，這個過程是again and again並且一層一層地畫……事實上有必要嗎？

這兩問題就交給大家解決了，下一篇我將會給大家講講如何優化這個介面使之更高效！

頂
1
踩

相關文章