仿知乎日报第十二篇：为ArticleActivity加载布局

一.

1.我们先来看看最后效果：

整个布局就是一个LinearLayout，上面是一个RelativeLayout，里面有一个ImageButton和2个TextView，这里有一个注意的地方，就是上面评论图标加上数字内容是一个TextView，用TextView的drawableLeft属性就可以设置在文字旁边加上图片。LinearLayout的下面是一个WebView。

2.看看具体的布局代码    （article_page.xml）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
    <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="60dp"
       android:background="#3CB371"
       android:gravity="center_vertical">
 
        <ImageButton
           android:id="@+id/ib_article_back"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:background="@android:color/transparent"
           android:paddingLeft="15dp"
           android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha"/>
 
 
        <TextView
           android:id="@+id/tv_article_comment"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_alignParentRight="true"
           android:layout_marginRight="60dp"
           android:drawableLeft="@drawable/comment"
           android:gravity="center_vertical"
           android:paddingRight="30dp"
           android:textColor="#FFFFFF"/>
 
        <TextView
           android:id="@+id/tv_article_praise"
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:layout_alignParentRight="true"
           android:layout_marginRight="20dp"
           android:drawableLeft="@drawable/praise"
           android:gravity="center_vertical"
           android:textColor="#FFFFFF"/>
    </RelativeLayout>
 
    <WebView
       android:id="@+id/wv_article_content"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
 
</LinearLayout>
 

二.接下来我们把布局加载到代码中

public class ArticleActivity extends Activity {
    private ImageButton  mIbBack;
    private TextView  mTvComment;
    private TextView  mTvPraise;
    private WebView   mWvContent;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
//     初始化布局
       initView();
//     加载数据
       initData();
//     初始化事件
       initListner();
    }
 
    private void initView() {
//     加载布局，拿到布局中的各个控件
       setContentView(R.layout.article_page);
       mIbBack = (ImageButton) findViewById(R.id.ib_article_back);
       mTvComment = (TextView) findViewById(R.id.tv_article_comment);
       mTvPraise = (TextView) findViewById(R.id.tv_article_praise);
//     拿到WebView控件
       mWvContent = (WebView) findViewById(R.id.wv_article_content);
       WebSettings wvSettings = mWvContent.getSettings();
//     设置支持JaveScript脚本
       wvSettings.setJavaScriptEnabled(true);
      
    }
 
 
}