简单新闻客户端(5)---其他细节优化,更符合MD设计
2016-10-10 11:21
316 查看
关于material design请自行百度谷歌。最好翻墙阅读谷歌官方文档。学会MD设计规范。
listview item.xml
注意这个是用来设置点击阴影的
说明:webview必须使用
测试:
主activity的toolbar修改:
toolbar.xml
main_activity.xml
最关键的一点:
由于使用的是listview没有实现NestedScrollingChild接口
,效果不能实现。
解决办法:1.使用RecyclerView代替listview
2.引入NestedScrollView
3.重写listview 实现NestedScrollingChild接口
参考文章:http://blog.csdn.net/qq_33689414/article/details/51362082
失败出现滑动冲突,listview显示不全。重写去除listview滚动事件。
参考文章:http://blog.csdn.net/mitos_yggdrasill/article/details/51918546
使用自定义的listview代替原来的lisview。
NewsListFragment.java
测试:
使用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; } }
测试:
相关文章推荐
- 简单新闻客户端(1)---主界面设计
- 简单新闻客户端(2)---新闻分页界面设计
- MySQL中SQL优化和架构设计的一些简单想法
- 【项目】优化算法设计(二):程序的简单实现
- CopyU!继续细节优化及人性化设计改进
- 《『若水新闻』客户端开发教程》——04.设计新闻分类UI(2)
- 《『若水新闻』客户端开发教程》——03.设计新闻分类UI(1)
- [原创]MySQL中SQL优化和架构设计的一些简单想法
- 《『若水新闻』客户端开发教程》——06.设计新闻内容UI
- 设计模式(1)-使用简单工厂优化代码(转载)
- Linux TCP server系列(2)-简单优化服务器和客户端程序
- 《『若水新闻』客户端开发教程》——04.设计新闻分类UI(2)
- [原创]MySQL中SQL优化和架构设计的一些简单想法
- 一个.net客户端通讯框架的设计(四)---协议解码/编码器工厂以及为其他模块提供消息的dealers/trigers
- MySQL中SQL优化和架构设计的一些简单想法
- 由一个简单的客户端间TCP/UDP通信程序引发的关于设计模式的思考
- MySQL中SQL优化和架构设计的一些简单想法
- 【转】MySQL中SQL优化和架构设计的一些简单想法
- 设计模式(1)-使用简单工厂优化代码
- 《『若水新闻』客户端开发教程》——02.主界面设计