简单新闻客户端(5)---其他细节优化，更符合MD设计

关于material design请自行百度谷歌。最好翻墙阅读谷歌官方文档。学会MD设计规范。

---

使用cardview使listview的item看起来立体:

详情阅读文章:CardView的使用
listview item.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginBottom="5dp"    android:layout_marginLeft="5dp"    android:layout_marginRight="5dp"    android:foreground="?attr/selectableItemBackground">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center">        <com.android.volley.toolbox.NetworkImageView            android:id="@+id/news_pic"            android:layout_width="100dp"            android:layout_height="100dp"            android:scaleType="fitCenter"            android:src="@mipmap/ic_launcher" />        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <TextView                android:id="@+id/text_title"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:text="xxxxxx"                android:textSize="20sp" />            <TextView                android:id="@+id/text_content"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:gravity="center"                android:text="xxxxxx"                android:textColor="#cc0000"                android:textSize="15sp" />        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

注意这个是用来设置点击阴影的

android:foreground="?attr/selectableItemBackground"

带图片伸缩的ToolBar–CollapsingToolbarLayout+AppBarLayout+CoordinatorLayout

参考文章:Android5.0+(CollapsingToolbarLayout)

<?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"    tools:context=".Activity.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="256dp"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/ivImage"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                android:src="@mipmap/ic_launcher"                android:transitionName="新闻图片"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.7" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fillViewport="true"        android:fitsSystemWindows="true"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <WebView            android:id="@+id/web_text"            android:layout_width="match_parent"            android:layout_height="wrap_content"></WebView>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

说明:webview必须使用NestedScrollView包裹才能实现效果。
测试:

主activity的toolbar修改:

toolbar.xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/appbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        app:layout_scrollFlags="scroll|enterAlways"        android:elevation="5dp"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /></android.support.design.widget.AppBarLayout>

main_activity.xml

<android.support.design.widget.CoordinatorLayout        android:id="@+id/main_content"        android:layout_width="match_parent"        android:layout_height="match_parent">        <include            android:id="@+id/appbar"            layout="@layout/toolbar" />        <FrameLayout            android:id="@+id/frame_content"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_below="@+id/appbar"            android:scrollbars="none"            android:elevation="5dp"            app:layout_behavior="@string/appbar_scrolling_view_behavior" />    </android.support.design.widget.CoordinatorLayout>

最关键的一点:
由于使用的是listview没有实现NestedScrollingChild接口
，效果不能实现。
解决办法：1.使用RecyclerView代替listview
2.引入NestedScrollView
3.重写listview 实现NestedScrollingChild接口

参考文章:http://blog.csdn.net/qq_33689414/article/details/51362082

<android.support.v4.widget.NestedScrollView        android:fillViewport="true"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">    <ListView        android:id="@+id/listview_news"        android:layout_width="match_parent"        android:layout_height="wrap_content"></ListView>    </android.support.v4.widget.NestedScrollView>

失败出现滑动冲突，listview显示不全。重写去除listview滚动事件。

参考文章:http://blog.csdn.net/mitos_yggdrasill/article/details/51918546

public class NestedListView extends ListView {    public NestedListView(Context context) {        super(context);    }    public NestedListView(Context context, AttributeSet attrs) {        super(context, attrs);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);        super.onMeasure(widthMeasureSpec, expandSpec);    }}  

使用自定义的listview代替原来的lisview。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:fillViewport="true"        app:layout_behavior="@string/appbar_scrolling_view_behavior">    <com.example.administrator.newsbyhuluwo.Activity.NestedListView        android:id="@+id/listview_news"        android:layout_width="match_parent"        android:layout_height="wrap_content">    </com.example.administrator.newsbyhuluwo.Activity.NestedListView>    </android.support.v4.widget.NestedScrollView></LinearLayout>

NewsListFragment.java

public class NewsListFragment extends Fragment {    public static List<News> newsList = new ArrayList<>();    private NestedListView listView;    public static NewAdapter newAdapter;    @Override    public void onAttach(Context context) {        super.onAttach(context);    }    @Nullable    @Override    public View onCreateView(final LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_newslist, container, false);        listView = (NestedListView) view.findViewById(R.id.listview_news);        newAdapter = new NewAdapter(getActivity(), R.layout.item_newslist, newsList);        listView.setAdapter(newAdapter);        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                Toast.makeText(getContext(),                        newsList.get(position).getUrl(), Toast.LENGTH_LONG).show();                Context context = getActivity();                Intent intent = new Intent(context, NewsDetailActivity.class);                //用Bundle携带数据                Bundle bundle=new Bundle();                //传递name参数为tinyphp                bundle.putString("uri", newsList.get(position).getUrl());                intent.putExtras(bundle);                context.startActivity(intent);            }        });        return view;    }}

测试: