极客新闻中详情页的布局

效果.gif

在values文件夹下的styles.xml添加

<style name="NoAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>

在清单文件中设置这个Activity应用上面的style

xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.zhihu.activity.DailyNewsArticleActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:collapsedTitleGravity="center"
            app:contentScrim="@color/colorAccent"
            app:expandedTitleMarginStart="200dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:id="@+id/img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg_about"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <!--layout_behavior如果不加这个行为,第一个条目会被toolBar遮挡-->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nsv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></WebView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_toolbar_like_n"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="right|bottom"
        app:backgroundTint="@color/fabbg"/>

    <FrameLayout
        android:id="@+id/ll_detail_bottom"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@android:color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:padding="6dp">

            <android.support.v4.widget.Space
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="2" />

            <TextView
                android:id="@+id/tv_detail_bottom_like"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="3dp"
                android:drawableTop="@mipmap/ic_daily_like"
                android:text="@string/detail_bottom_like"
                android:textColor="@color/bottom_text" />

            <android.support.v4.widget.Space
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="3" />

            <TextView
                android:id="@+id/tv_detail_bottom_comment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="3dp"
                android:drawableTop="@mipmap/ic_daily_comment"
                android:text="@string/detail_bottom_commit"
                android:textColor="@color/bottom_text" />

            <android.support.v4.widget.Space
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="3" />

            <TextView
                android:id="@+id/tv_detail_bottom_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawablePadding="3dp"
                android:drawableTop="@mipmap/ic_daily_share"
                android:text="@string/detail_bottom_share"
                android:textColor="@color/bottom_text" />

            <android.support.v4.widget.Space
                android:layout_width="0dp"
                android:layout_height="1dp"
                android:layout_weight="2" />
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_gravity="top"
            android:background="#e8e8e8" />
    </FrameLayout>


</android.support.design.widget.CoordinatorLayout>

Activity

public class DailyNewsArticleActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String TAG = "DailyNewsArticleActivit";

    private Toolbar toolBar;
    private CollapsingToolbarLayout ctl;
    private AppBarLayout appBar;
    private NestedScrollView nsv;
    private WebView webview;
    private int id;
    private ImageView img;
    private FloatingActionButton fab;
    private boolean isLike=false;
    private Wbean newWbean;
    DbUtil dbUtil = DbUtil.getDbUtil();
    private DailyNewsArticleBean queryOne;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_daily_news_article);
        id = getIntent().getIntExtra("id", 0);
        initView();
        initToolbar();
        initData();
    }
    
    // 要显示的数据，根据自己的情况修改
    private void initData() {
        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(HttpService.dailyNewsArticleUrl)
                .addConverterFactory(GsonConverterFactory.create())
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .build();

        HttpService httpService = retrofit.create(HttpService.class);

        httpService.getDailyNewsArticleData(id)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Observer<Wbean>() {
                    @Override
                    public void onSubscribe(Disposable d) {

                    }

                    @Override
                    public void onNext(Wbean wbean) {
                        newWbean=wbean;

                        queryOne = dbUtil.queryOne(wbean.getTitle());
                        if (queryOne !=null){
                            isLike=true;
                            fab.setImageResource(R.mipmap.ic_toolbar_like_p);
                        }

                        ctl.setTitle(wbean.getTitle());
                        Glide.with(DailyNewsArticleActivity.this).load(wbean.getImage()).into(img);
                        WebSettings settings = webview.getSettings();
                        settings.setJavaScriptEnabled(true);
                        settings.setLoadWithOverviewMode(true);
                        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
                        settings.setSupportZoom(true);
                        webview.setWebViewClient(new WebViewClient() {
                            @Override
                            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                                view.loadUrl(url);
                                return true;
                            }
                        });
                        String htmlData = HtmlUtil.createHtmlData(wbean.getBody(), wbean.getCss(), (List<String>) wbean.getJs());
                        webview.loadData(htmlData, HtmlUtil.MIME_TYPE, HtmlUtil.ENCODING);
                    }

                    @Override
                    public void onError(Throwable e) {

                    }

                    @Override
                    public void onComplete() {

                    }
                });
    }

    private void initToolbar() {
        toolBar.setTitle("");
        setSupportActionBar(toolBar);
    }

    private void initView() {
        toolBar = (Toolbar) findViewById(R.id.toolBar);
        ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);
        appBar = (AppBarLayout) findViewById(R.id.appBar);
        nsv = (NestedScrollView) findViewById(R.id.nsv);
        img = (ImageView) findViewById(R.id.img);

        //滑动偏移监听事件
        appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                Log.d(TAG, "onOffsetChanged: " + verticalOffset);
            }
        });
        ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);

        //标题必须在CollapsingToolbarLayout设置
        ctl.setTitle("");
        //扩张时候的title颜色
        ctl.setExpandedTitleColor(getResources().getColor(R.color.colorAccent));
        //收缩后显示title的颜色
        ctl.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
        webview = (WebView) findViewById(R.id.webview);

//        webview.loadUrl("http://news-at.zhihu.com/api/4/news/"+id);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(this);
    }
    
    // 浮点按钮的监听
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.fab:
                    if (isLike){
                        isLike=false;
                        fab.setImageResource(R.mipmap.ic_toolbar_like_n);
                        dbUtil.delete(queryOne);
                        Snackbar.make(v,"取消收藏",Snackbar.LENGTH_SHORT)
                                .setAction("取消", new View.OnClickListener() {
                                    @Override
                                    public void onClick(View v) {

                                    }
                                })
                                .show();
                    }else {
                        isLike=true;
                        fab.setImageResource(R.mipmap.ic_toolbar_like_p);
                        DailyNewsArticleBean dailyNewsArticleBean = new DailyNewsArticleBean();
                        dailyNewsArticleBean.setBody(newWbean.getBody());
                        dailyNewsArticleBean.setCss(newWbean.getCss().get(0));
                        dailyNewsArticleBean.setGa_prefix(newWbean.getGa_prefix());
                        dailyNewsArticleBean.setId(newWbean.getId());
                        dailyNewsArticleBean.setImage(newWbean.getImage());
                        dailyNewsArticleBean.setImage_source(newWbean.getImage_source());
                        dailyNewsArticleBean.setImages(newWbean.getImages().get(0));
                        dailyNewsArticleBean.setShare_url(newWbean.getShare_url());
                        dailyNewsArticleBean.setTitle(newWbean.getTitle());
                        dailyNewsArticleBean.setType(newWbean.getType());
                        DbUtil.getDbUtil().insert(dailyNewsArticleBean);
                        Snackbar.make(v,"收藏成功",Snackbar.LENGTH_SHORT)
                                .setAction("取消", new View.OnClickListener() {
                                    @Override
                                    public void onClick(View v) {

                                    }
                                })
                                .show();
                    }
                break;
        }
    }
}