网易新闻客户端界面截图_网易科技
网易新闻客户端界面截图
>>本文跟贴已关闭<<模拟网易新闻客户端界面
这几天找工作闲来没事，偶然在一个上面看到有人模拟网易新闻客户端首页顶部那个效果，一时兴起，也来自己动手完整地模拟一个，包括顶部的特效组件和底部的类似于TabHost的组件。下面就动手一步一步地Coding...
二、效果截图
本来想找个软件动态截图，但是好像没找着。。。这样的话，看不出来点击之后的动态切换效果了。以后找着了再来替换。
三、底部类似TabHost组件切换效果的实现&
为了便于大家亲自动手实践，这里的讲解顺序就按照开发的顺序来讲，所以先做这个底部的&TabHost&，然后再具体来实现里面的五个页面布局。
类似于图3到图5三张图片所示，当点击&新闻&或者&话题&或者&投票&的时候，有个稍微透明的红色背景的ImageView做相应的移动。这其实就是给ImageView设置了一个位移动画，当点击事件触发的时候，首先切换点击后的图片（有点类似于按下效果的图片），然后开始移动铺在上面的红色图片，让用户感觉到有移动的过程，增强用户体验。
关于这个位移动画，需要用到TranslateAnimation类，移动的核心代码也就几行，因为这个移动功能不但在底部控件上使用，而且在顶部也使用了，所以，为了以后使用方便，我们把它单独定义在一个类里面MoveBg.java
& View Code
package com.and.netease.
import android.view.V
import android.view.animation.TranslateA
public class MoveBg {
&&&& * 移动方法
&&&& * @param v
&&&& *&&&&&&&&&&& 需要移动的View
&&&& * @param startX
&&&& *&&&&&&&&&&& 起始x坐标
&&&& * @param toX
&&&& *&&&&&&&&&&& 终止x坐标
&&&& * @param startY
&&&& *&&&&&&&&&&& 起始y坐标
&&&& * @param toY
&&&& *&&&&&&&&&&& 终止y坐标
&&& public static void moveFrontBg(View v, int startX, int toX, int startY, int toY) {
&&&&&&& TranslateAnimation anim = new TranslateAnimation(startX, toX, startY, toY);
&&&&&&& anim.setDuration(200);
&&&&&&& anim.setFillAfter(true);
&&&&&&& v.startAnimation(anim);
里面的各个参数有相应的说明。
然后就来开发这个带有TabHost功能的组件。根据文档说明，在xml中定义TabHost的时候，必须使用TabWidget和FrameLayou两个组件，而且它们的id也应该是android:id=&@android:id/tabs&和android:id=&@android:id/tabcontent&，由于提供的TabHost界面不怎么好看，所以这里想到自己来定义它，但是这两个组件是不可以不写的，这里，把TabWidget界面隐藏掉了，取而代之的是RadioGroup组件来实现底部类似于TabHost的控件。具体布局代码如main.xml
& View Code
&?xml version=&1.0& encoding=&utf-8&?&
&LinearLayout xmlns:android=&&
&&& android:layout_width=&fill_parent&
&&& android:layout_height=&fill_parent&
&&& android:orientation=&vertical& &
&&& &TabHost
&&&&&&& android:id=&@android:id/tabhost&
&&&&&&& android:layout_width=&fill_parent&
&&&&&&& android:layout_height=&fill_parent& &
&&&&&&& &LinearLayout
&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&& android:layout_height=&fill_parent&
&&&&&&&&&&& android:orientation=&vertical& &
&&&&&&&&&&& &FrameLayout
&&&&&&&&&&&&&&& android:id=&@android:id/tabcontent&
&&&&&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&&&&&& android:layout_height=&0.0dip&
&&&&&&&&&&&&&&& android:layout_weight=&1.0& &
&&&&&&&&&&& &/FrameLayout&
&&&&&&&&&&& &TabWidget
&&&&&&&&&&&&&&& android:id=&@android:id/tabs&
&&&&&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&& android:visibility=&gone& /&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:id=&@+id/layout_bottom&
&&&&&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&&&&&& android:layout_height=&wrap_content& &
&&&&&&&&&&&&&&& &RadioGroup
&&&&&&&&&&&&&&&&&&& android:id=&@+id/radiogroup&
&&&&&&&&&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_gravity=&bottom&
&&&&&&&&&&&&&&&&&&& android:background=&@drawable/bottombg&
&&&&&&&&&&&&&&&&&&& android:gravity=&center_vertical&
&&&&&&&&&&&&&&&&&&& android:orientation=&horizontal& &
&&&&&&&&&&&&&&&&&&& &RadioButton
&&&&&&&&&&&&&&&&&&&&&&& android:id=&@+id/radio_news&
&&&&&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&&&&&& android:background=&@drawable/tab_selector_news&
&&&&&&&&&&&&&&&&&&&&&&& android:button=&@null&
&&&&&&&&&&&&&&&&&&&&&&& android:checked=&true& /&
&&&&&&&&&&&&&&&&&&& &RadioButton
&&&&&&&&&&&&&&&&&&&&&&& android:id=&@+id/radio_topic&
&&&&&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&&&&&& android:background=&@drawable/tab_selector_topic&
&&&&&&&&&&&&&&&&&&&&&&& android:button=&@null& /&
&&&&&&&&&&&&&&&&&&& &RadioButton
&&&&&&&&&&&&&&&&&&&&&&& android:id=&@+id/radio_pic&
&&&&&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&&&&&& android:background=&@drawable/tab_selector_pic&
&&&&&&&&&&&&&&&&&&&&&&& android:button=&@null& /&
&&&&&&&&&&&&&&&&&&& &RadioButton
&&&&&&&&&&&&&&&&&&&&&&& android:id=&@+id/radio_follow&
&&&&&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&&&&&& android:background=&@drawable/tab_selector_follow&
&&&&&&&&&&&&&&&&&&&&&&& android:button=&@null& /&
&&&&&&&&&&&&&&&&&&& &RadioButton
&&&&&&&&&&&&&&&&&&&&&&& android:id=&@+id/radio_vote&
&&&&&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&&&&&& android:background=&@drawable/tab_selector_vote&
&&&&&&&&&&&&&&&&&&&&&&& android:button=&@null& /&
&&&&&&&&&&&&&&& &/RadioGroup&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&& &/LinearLayout&
&&& &/TabHost&
&/LinearLayout&
注意里面的RadioButton组件，当初测试的时候没有设置android:button=&@null&，只设置了background=&@drawable/...&属性（这是一个selector属性，可以在xml文件中定义一些控件的按下效果，或者获取焦点等不同状态下的资源），出现点击不切换图片的问题。
对应的selector文件对应如下tab_selector_news.xml
& View Code
&?xml version=&1.0& encoding=&utf-8&?&
&selector xmlns:android=&&&
&&& &item android:drawable=&@drawable/current_news_tab& android:state_checked=&true&/&
&&& &item android:drawable=&@drawable/back_news_tab& android:state_checked=&false&/&
&/selector&
其它几个，只是替换不同的图片资源罢了，不再一一列出。这些资源文件放在res目录下的drawable文件夹下（如果没有，则新建）
有了布局文件，还需要在Activity中设置一下，为每个TabHost添加具体的Tab页面，如下
tabHost = getTabHost();
&&&&&&& tabHost.addTab(tabHost.newTabSpec(&news&).setIndicator(&News&).setContent(new Intent(this, TabNewsActivity.class)));
&&&&&&& tabHost.addTab(tabHost.newTabSpec(&topic&).setIndicator(&Topic&).setContent(new Intent(this, TabTopicActivity.class)));
&&&&&&& tabHost.addTab(tabHost.newTabSpec(&picture&).setIndicator(&Picture&).setContent(new Intent(this, TabPicActivity.class)));
&&&&&&& tabHost.addTab(tabHost.newTabSpec(&follow&).setIndicator(&Follow&).setContent(new Intent(this, TabFollowActivity.class)));
&&&&&&& tabHost.addTab(tabHost.newTabSpec(&vote&).setIndicator(&Vote&).setContent(new Intent(this, TabVoteActivity.class)));
当然，相应的目标Activity自然暂且随意创建
然后为RadioGroup设置选择改变事件监听器，当选择改变，改变TabHost中当前显示的Activity页面
private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {
&&&&&&& @Override
&&&&&&& public void onCheckedChanged(RadioGroup group, int checkedId) {
&&&&&&&&&&& switch (checkedId) {
&&&&&&&&&&& case R.id.radio_news:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&news&);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_topic:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&topic&);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_pic:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&picture&);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_follow:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&follow&);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_vote:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&vote&);
&&&&&&&&&&&&&&&
&&&&&&&&&&& default:
&&&&&&&&&&&&&&&
&&&&&&&&&&& }
至此就实现了一个自定义的&TabHost&，接下来再添加那个移动的特效
是一个RelativeLayout布局，我只是在这个layout上面添加了一个ImageView，然后当点击的时候，移动它的位置来实现效果
private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {
&&&&&&& @Override
&&&&&&& public void onCheckedChanged(RadioGroup group, int checkedId) {
&&&&&&&&&&& switch (checkedId) {
&&&&&&&&&&& case R.id.radio_news:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&news&);
//&&&&&&&&&&&&&&& moveFrontBg(img, startLeft, 0, 0, 0);
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);
&&&&&&&&&&&&&&& startLeft = 0;
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_topic:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&topic&);
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(img, startLeft, img.getWidth(), 0, 0);
&&&&&&&&&&&&&&& startLeft = img.getWidth();
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_pic:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&picture&);
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 2, 0, 0);
&&&&&&&&&&&&&&& startLeft = img.getWidth() * 2;
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_follow:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&follow&);
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 3, 0, 0);
&&&&&&&&&&&&&&& startLeft = img.getWidth() * 3;
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.radio_vote:
&&&&&&&&&&&&&&& tabHost.setCurrentTabByTag(&vote&);
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 4, 0, 0);
&&&&&&&&&&&&&&& startLeft = img.getWidth() * 4;
&&&&&&&&&&&&&&&
&&&&&&&&&&& default:
&&&&&&&&&&&&&&&
&&&&&&&&&&& }
此处要记住移动的初始位置和起始位置就行了。Y坐标轴上不变，只横向移动。至此，这个功能实现完了
四、顶部按下效果实现
顶部和底部那个自定义控件的实现效果大体是一样的，唯一不同的就是，这个移动的不再是ImageView，而是一个TextView，在移动完成之后还需要改变这个TextView上的文字，仅此而已，而已文件如下layout_news.xml
&?xml version=&1.0& encoding=&utf-8&?&
&LinearLayout xmlns:android=&&
&&& android:layout_width=&fill_parent&
&&& android:layout_height=&fill_parent&
&&& android:orientation=&vertical& &
&&& &RelativeLayout
&&&&&&& android:id=&@+id/layout_top&
&&&&&&& android:layout_width=&match_parent&
&&&&&&& android:layout_height=&40dip&
&&&&&&& android:background=&#990000& &
&&&&&&& &ImageView
&&&&&&&&&&& android:id=&@+id/img_netease_top&
&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&& android:layout_centerVertical=&true&
&&&&&&&&&&& android:layout_marginLeft=&10dip&
&&&&&&&&&&& android:src=&@drawable/netease_top& /&
&&&&&&& &TextView
&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&& android:layout_centerVertical=&true&
&&&&&&&&&&& android:layout_toRightOf=&@+id/img_netease_top&
&&&&&&&&&&& android:text=&@string/news_top_left_text&
&&&&&&&&&&& android:textColor=&@android:color/white&
&&&&&&&&&&& android:textSize=&20sp& /&
&&&&&&& &ImageView
&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&& android:layout_alignParentRight=&true&
&&&&&&&&&&& android:src=&@drawable/duoyun& /&
&&& &/RelativeLayout&
&&& &RelativeLayout
&&&&&&& android:id=&@+id/layout_title_bar&
&&&&&&& android:layout_width=&fill_parent&
&&&&&&& android:layout_height=&35dip&
&&&&&&& android:background=&@android:color/white&
&&&&&&& android:paddingLeft=&10dip&
&&&&&&& android:paddingRight=&10dip& &
&&&&&&& &LinearLayout
&&&&&&&&&&& android:layout_width=&fill_parent&
&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&& android:orientation=&horizontal& &
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:id=&@+id/layout&
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_news&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_tops& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_sport&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_sport& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_play&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_play& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_finance&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_finance& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_science&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_science& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&&&&&& &RelativeLayout
&&&&&&&&&&&&&&& android:layout_width=&match_parent&
&&&&&&&&&&&&&&& android:layout_height=&match_parent&
&&&&&&&&&&&&&&& android:layout_weight=&1& &
&&&&&&&&&&&&&&& &TextView
&&&&&&&&&&&&&&&&&&& android:id=&@+id/tv_title_bar_more&
&&&&&&&&&&&&&&&&&&& android:layout_width=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_height=&wrap_content&
&&&&&&&&&&&&&&&&&&& android:layout_centerInParent=&true&
&&&&&&&&&&&&&&&&&&& android:text=&@string/title_news_category_more& /&
&&&&&&&&&&& &/RelativeLayout&
&&&&&&& &/LinearLayout&
&&& &/RelativeLayout&
&/LinearLayout&
对应的Activity代码TabNewsActivity.java
package com.and.
import com.and.netease.utils.MoveBg;
import android.app.A
import android.graphics.C
import android.os.B
import android.view.G
import android.view.V
import android.view.View.OnClickL
import android.widget.RelativeL
import android.widget.RelativeLayout.LayoutP
import android.widget.TextV
public class TabNewsActivity extends Activity {
&&& RelativeL
&&& TextView tv_//需要移动的View
&&& TextView tv_bar_
&&& TextView tv_bar_
&&& TextView tv_bar_
&&& TextView tv_bar_
&&& TextView tv_bar_
&&& TextView tv_bar_
&&& int avg_width = 0;// 用于记录平均每个标签的宽度，移动的时候需要
&&& @Override
&&& protected void onCreate(Bundle savedInstanceState) {
&&&&&&& super.onCreate(savedInstanceState);
&&&&&&& setContentView(R.layout.layout_news);
&&&&&&& initViews();
&&& private void initViews() {
&&&&&&& layout = (RelativeLayout) findViewById(R.id.layout_title_bar);
&&&&&&& tv_bar_news = (TextView) findViewById(R.id.tv_title_bar_news);
&&&&&&& tv_bar_sport = (TextView) findViewById(R.id.tv_title_bar_sport);
&&&&&&& tv_bar_play = (TextView) findViewById(R.id.tv_title_bar_play);
&&&&&&& tv_bar_finance = (TextView) findViewById(R.id.tv_title_bar_finance);
&&&&&&& tv_bar_science = (TextView) findViewById(R.id.tv_title_bar_science);
&&&&&&& tv_bar_more = (TextView) findViewById(R.id.tv_title_bar_more);
&&&&&&& tv_bar_news.setOnClickListener(onClickListener);
&&&&&&& tv_bar_sport.setOnClickListener(onClickListener);
&&&&&&& tv_bar_play.setOnClickListener(onClickListener);
&&&&&&& tv_bar_finance.setOnClickListener(onClickListener);
&&&&&&& tv_bar_science.setOnClickListener(onClickListener);
&&&&&&& tv_bar_more.setOnClickListener(onClickListener);
&&&&&&& tv_front = new TextView(this);
&&&&&&& tv_front.setBackgroundResource(R.drawable.slidebar);
&&&&&&& tv_front.setTextColor(Color.WHITE);
&&&&&&& tv_front.setText(&头条&);
&&&&&&& tv_front.setGravity(Gravity.CENTER);
&&&&&&& RelativeLayout.LayoutParams param = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
&&&&&&& param.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);
&&&&&&& layout.addView(tv_front, param);
&&& private OnClickListener onClickListener = new OnClickListener() {
&&&&&&& int startX;//移动的起始位置
&&&&&&& @Override
&&&&&&& public void onClick(View v) {
&&&&&&&&&&& avg_width = findViewById(R.id.layout).getWidth();
&&&&&&&&&&& switch (v.getId()) {
&&&&&&&&&&& case R.id.tv_title_bar_news:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, 0, 0, 0);
&&&&&&&&&&&&&&& startX = 0;
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_tops);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.tv_title_bar_sport:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, avg_width, 0, 0);
&&&&&&&&&&&&&&& startX = avg_
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_sport);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.tv_title_bar_play:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, avg_width * 2, 0, 0);
&&&&&&&&&&&&&&& startX = avg_width * 2;
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_play);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.tv_title_bar_finance:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, avg_width * 3, 0, 0);
&&&&&&&&&&&&&&& startX = avg_width * 3;
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_finance);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.tv_title_bar_science:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, avg_width * 4, 0, 0);
&&&&&&&&&&&&&&& startX = avg_width * 4;
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_science);
&&&&&&&&&&&&&&&
&&&&&&&&&&& case R.id.tv_title_bar_more:
&&&&&&&&&&&&&&& MoveBg.moveFrontBg(tv_front, startX, avg_width * 5, 0, 0);
&&&&&&&&&&&&&&& startX = avg_width * 5;
&&&&&&&&&&&&&&& tv_front.setText(R.string.title_news_category_more);
&&&&&&&&&&&&&&&
&&&&&&&&&&& default:
&&&&&&&&&&&&&&&
&&&&&&&&&&& }
通过这种例子，我个人总结有两点需要掌握，一个是TranslateAnimation类的使用，另一个就是布局文件的嵌套使用，经验多了，慢慢就会有感觉了。以上仅代表我个人的一点点想法和总结，还请各位多多指教。（另外附上源代码下载地址）
作者& And.He上下架应用
只需一步，快速开始
从今日头条竞品分析中看新闻资讯类APP如何做个性化推荐？
原作者:来自: 人人都是产品经理 12:01
今日头条个性化的资讯推荐功能精确地满足用户碎片化利用时间的需求，拥有先发优势的今日头条掌握了大量的用户与行为数据，在以后的发展过程中更要做到商业变现与用户体验两者的平衡，并且要寻求多样化的变现形式。
今日头条个性化的资讯推荐功能精确地满足用户碎片化利用时间的需求，拥有先发优势的今日头条掌握了大量的用户与行为数据，在以后的发展过程中更要做到商业变现与用户体验两者的平衡，并且要寻求多样化的变现形式。同时要加大对内容的监控力度，创造出一套完整的自媒体用户管理体制，提高内容的质量，增强平台的权威性。一、行业概述中国互联网信息中心发布的报告显示，截至2015年12月，中国网民规模达6.88亿，互联网普及率为50.3%；手机网民规模达6.2亿，移动互联网渗透率升至90.1%。而易观智库研究数据显示，2015年9月，中国新闻客户端行业活跃人数达到3.38亿，渗透率为54.3%。二、市场概况继PC端的互联网门户之争后，随着宽带基础的设施的完备、智能手机的普及等利好因素，互联网在中国得到了迅速的发展，用户呈现出从PC向移动端大规模转移的趋势，带动了移动互联网用户人数的暴增，用户时间趋于碎片化，移动新闻资讯行业成为互联网的巨大的流量来源，移动新闻客户端领域竞争激烈。从渗透率看，2015年下半年新闻资讯行业格局稳定，腾讯新闻凭借着庞大的流量入口，以其强大的用户覆盖率，位列第一。今日头条虽是后起之秀，但凭借着数据挖掘与引擎推荐迅速跑马圈地，直逼腾讯新闻。排名前四位的腾讯新闻、今日头条、搜狐新闻以及网易新闻，覆盖了近八成的新闻客户端市场。三、产品分析（一）产品简介今日头条是一款基于机器学习的数据挖掘与引擎推荐产品，旨在为用户提供个性化的新闻资讯，实现内容与用户的精准连接。公开数据显示，于2012年8月上线的今日头条，截至2016年5月，累计激活用户数已达4.8亿，日活跃人数超过4700万，成为仅次于腾讯的第二大资讯平台。（二）核心功能以技术为壁垒，以海量数据为依托，通过机器学习感知、理解、判断用户的行为特征，例如用户在新闻客户端的滑动、搜索、查询、点击、收藏、评论、分享等动作，综合用户具体的环境特征与社交属性判断用户的兴趣爱好，为用户推荐个性化的新闻资讯，塑造千人千面的阅读场景。（三）产品特色今日头条主要两大特色。第一、个性化的内容推荐机制，根据用户的喜好为其推荐个性化的媒体信息，让用户在信息过剩的互联网时代迅速获取自己所关心的内容，而不是千人一面。第二、庞大的内容创业者群体。早期的今日头条将自身定位为内容平台，不做新闻生产者，只做新闻的搬运工，通过爬虫抓取第三方媒体网站信息，这样的做法让今日头条获取了海量的媒体信息，但也引来了版权之争。而后，今日头条为了减少版权纠纷与加强平台的内容把控能力，创办了头条号，吸引了大量传统媒体与自媒体内容创作者的加入。（四）产品slogan“你所关心的，才是头条”。传统意义上的头条意指与社会群体密切相关的信息，而今日头条的这句产品slogan则打破了传统，实现了以用户自身为中心，突显了今日头条旨在为用户提供个性资讯的产品定位。（五）产品商业模式互联网产品变现的方式总体上有三种，广告、电商以及游戏。今日头条选择了广告变现和电商变现。由于掌握了大量的用户数据，使得今日头条能够根据用户的具体画像来实现广告的精准投放。但是平台无法给用户提供相应的消费场景，电商只能作为今日头条次要的变现方式而存在，包括与京东合作的商品导购和互联网理财产品。与格瓦拉合作的今日电影，此外今日头条还为手机游戏导流。四、用户需求分析（一）需求分析关注社会热点与行业资讯，及时了解时事新闻，保持与外界的信息沟通。通过轻松有趣的内容满足自身休闲娱乐的需求。从海量的信息中得到解放，减少筛选信息的成本，能够快速获取自己的喜闻乐见的内容。（二）用户分析1、用户画像性别：今日头条的主要以男性用户为主，男女比例大致为3:2，这符合在整个移动新闻资讯行业中，男性是主要的用户群体。年龄：用户年龄主要集中在35岁以下，比例为77.3%。其中30岁以下的用户占比为59.7%，用户群体趋向于年轻化。地理位置：用户主要集中在北上广深、其他省会城市以及地级市，占比68.2%。学历：41.3%的用户学历在大专及以上，其中本科生占比最高。58.7%的用户学历在高中及以下，其中高中/职校/技校/占比最高。职业与收入：自由职业者/个体户/私营企业主成为最大的用户群体，达到37.8%的比重，用户收入主要集中在4000元以下，低收入群体占大部分。2、用户使用场景生活节奏的加快使人们的时间越来越趋于碎片化，移动互联网的普及给用户提供了利用碎片化的渠道，人们对移动新闻客户端的依赖性也逐渐上升。碎片化时间的特点在于时间长度较短，场景具有不稳定性，用户所能够吸纳的信息量是有限的。今日头条通过数据挖掘与引擎推荐，实现内容与用户的精准连接，极大减少用户的信息筛选时间与隐性成本，使用户能够充分利用其有限的碎片化时间。与其他传统新闻客户端相比，今日头条增加了用户的可利用的闲暇时间。假设一个使用场景，某天早上，一个白领在等待交通工具的过程中，当他打开某个传统新闻客户端后，却不知道自己该看哪一条，在快速滑动的过程中，他在寻找着自己感兴趣的新闻。而他旁边使用着今日头条的用户，当他一打开客户端，系统就根据他的喜好向他推荐了相关新闻，他的筛选时间在理想情况下接近于零，用户体验将远远优于前者。五、竞品分析（一）、产品对比渗透率：从渗透率看，2015年下半年新闻资讯行业格局稳定，腾讯新闻（31.8%）、今日头条（23.2%）、搜狐新闻（22.5%）网易新闻（17.1%）分别占据移动新闻资讯行业用户规模的前四位。活跃度：(艾媒咨询)数据显示，对于2015年手机新闻客户端活跃用户占比，凭借腾讯在社交产品积累庞大用户的优势，腾讯新闻在活跃用户占比上排名第一，占比38.2%；网易新闻客户端以及今日头条以较小差距分列二三位，分别占比33.1%和32.1%。搜狐新闻占比28.9%，位列第四。（二）、用户画像对比腾讯新闻：用户群体性别最均衡，年轻已婚的女性相对较多。大部分用户集中于30岁以下的年龄段，用户群年轻化程度仅次于网易新闻。用户学历水平大部分在大专以下，低学历用户占比最高，收入大部分在4000元以下。今日头条：以30以下的低收入年轻群体为主。搜狐新闻：以35岁以上的成熟商业界男士为主，男性用户所占比重最高。网易新闻：以30岁以下的用户为主，用户群更加年轻化，主要集中在地级市以上城市，大专及以上的高学历用户所占比重较大。公务员以及白领用户比重高于行业平均水平，中高收入占比亦更高。（三）、内容对比腾讯新闻、搜狐新闻和网易新闻客户端凭借着早期的门户网站的原始积累，已然形成了系统化的内容布局与培育出了一批更为专业的内容生产者，有足够的能力为用户提供更高质量的原创内容，不存在所谓的版权之争。而不做内容，只做平台的今日头条没有自身的内容编辑者，通过爬虫抓取媒体网站的内容，为用户推荐个性化的内容。并且创立头条号，吸引了众多的自媒体创业者，在内容的量上远远超过其他新闻客户端，并且能够做到多样化，个性化，大众化，但是存在侵权的风险。六、产品功能体验（一）产品结构图（二）产品体验1、交互体验页面展示：首页界面只展示用户关注的六个频道，其余频道隐藏在栏目右侧，用户可通过横向滑动来浏览自己关注的频道。另外，将系统所有频道通过折叠的方式隐藏于另一界面，用户可通过点击”+”来编辑频道。这样的设计有两个好处，第一、展示的频道数量适中，能够集中用户的注意力，使用户能够快速选择。第二、保证页面的统一与美观。今日头条基于用户的订阅来展现相关频道，因此频道的数量具有不确定性，如果采用列表式，不仅会占据大量页面空间，而且在排列上将无法做到整齐划一。动作设计：与新浪微博客户端一样，今日头条采用下拉界面以刷新内容。由于存在不同的频道，用户可以通过左右滑动来切换频道，不用将手移动到上面的频道栏逐个点击，使用起来也颇为方便。在首页界面，每条内容的右下方均有×号，点击后用户既可直接选择不感兴趣，也可以选择相应的标签，以减少同类内容，实现精准推送。但是同样的功能在视频界面却消失了，用户需要点击右下角的“.….”，选择“不感兴趣”，贴上具体的兴趣标签或者直接选择“不感兴趣”，前后经过三次点击才能将自己不感兴趣的内容屏蔽，中间环节过多，增加了用户的使用成本，今日头条既然主张以用户的兴趣爱好为内容推送的出发点，却没有做到让用户方便快速地做出是否感兴趣的选择，我想这点需要改进。2、内容体验个性化推荐特点明显张一鸣认为今日头条的机器学习能够基于用户的兴趣满足个性化的推荐需求，用户用得越久，就会觉得越好用。笔者在体验今日头条的两个星期以来发现平台首页上的内容大部分是我关注的领域，比如移动互联网、产品经理、支付宝与微信，内容多样化，每一次的下拉更新都会出现新内容，而系统自动更新的速度也比较快，有个不好的地方在于，自己喜欢而未来得及的内容容易被覆盖，难以找到。而在视频界面，这一个性化推荐的特点也尤其明显，以演员、电影题材类型为基准点，系统推荐的视频短片基本符合我的兴趣爱好，但是这些视频短片基本没有注明电影的名称，所以当我看到某部电影的有趣片段，想上视频网站看全集时，却不知道这部电影叫什么名字，而在评论中我发现，里面有许多误导人的评论，故意说一些奇奇怪怪的电影名字，给我的使用带来了一定的困扰。平台内容质量把控力度仍然有待提高广告是今日头条目标主要的变现方式，在使用过程中我发现今日头条上的广告偏多，主要以游戏为主，也曾经出现过教育、金融贷款的推广。头条号的创立吸引力了大量的内容创业者，但是内容质量也有高低之分，部分内容以夺人眼球的标题吸引人，但是内容质量低下，容易误导用户，可见平台对内容的审核仍然有待加强。（三）用户负面反馈苹果APP Store上通过观察用户的评论总结出以下几点用户对今日头条的负面反馈内容推荐质量差，甚至低俗，屏蔽后仍然出现类似的内容。标题党夺人眼球，内容没有看点，影响读者对头条的信任感。平台不加筛选的新闻搬运，没有官方判断，无法区分权威与非权威的文章，容易误导读者。不实报道不经审核。内容变化太快，难以继续阅读之前感兴趣的新闻。旧新闻滥竽充数。新闻评论都是水军。系统卡顿，闪退，操作不流畅。广告太多。从以上反馈可以看出，用户对今日头条的不满之处主要有两个三个方面：内容质量有待提高，真实性与权威性有待加强；广告投放过多，影响用户体验；系统不够完善，流畅性有待提高。七、SWOT分析S：优势1、数据挖掘、推荐引擎、智能算法的技术创新，抢占庞大的个性化资讯市场，实现内容与用户精准性连接。2、相对个性化的产品形式，让今日头条受到内容创作者、用户、广告主的一定青睐，顺势成为个性资讯市场的独角兽。3、头条号的创立吸引了大批量的内容创业者与传统媒体，强化了平台生产内容的能力，有利于实现内容的多样化，为个性推荐提供强大的内容保障。4、引入社交基因，多样的社交渠道。用户可选择微信、腾讯QQ、新浪微博和人人网登录，使得今日头条能够获取迅速获取用户的社交关系链以及以往的社交信息，描绘出更为精准的用户画像，判断用户的喜好。 同时多样化的社交渠道也增强了平台自身的内容分发能力，起到引流的作用。5、用户粘性居于行业前列。截止日，今日头条用户平均每日使用时长是腾讯新闻的两倍；新用户转化为忠实用户的比例是腾讯新闻的2.25倍。今日头条用户平均每日打开时长超过40分钟（据张一鸣的演讲，该数字今年3月已经上升到57分钟），该数据位于全网首位，远抛离其他新闻客户端。正是凭借这样的差距，即便今日头条在月度覆盖率上远不如腾讯新闻，但用户使用总时长占比却排名第一。W:劣势1、用户变现形式单一，尚未形成完整的产品生态。以广告为主要变现形式的今日头条，正面临着广告投放与用户体验之间应该如何平衡的难题。不少用户认为今日平台上的广告推送过多，影响了用户体验，给今日头条带来了用户流失的风险。而电商作为今日头条次要的变现形式，则与产品本身所提供的场景吻合度不高，并未给今日头条带来太多的变现空间。以BAT为首的巨头在移动资讯的战略路线上均为生态化发展，打造内容的多元化流量入口，进而让内容创作成为长期行为，今日头条的生态建设仍然有待突破。2、传统新闻客户端有着多年的内容沉淀以及专业化的内容编辑，针对客户端的主流用户各自形成了自身的用户与内容壁垒，在权威性上远高于头条号上的自媒体创业者，如何管理平台上的内容创业者，提升内容的真实性与权威性，是今日头条需要考虑的问题。3、在BTA与传统门户的强势介入之后，今日头条在个性化资讯市场的技术优势变得相对单薄，地位受到巨头的强势挑战。O:机会1、用户时间趋于碎片化，个性化资讯市场庞大。2、作为较早的个性化资讯产品，今日头条已然积累了大量的用户数据，在这一点上远远超越了后知后觉的新闻客户端，有着先发优势。3、自媒体创业成为互联网时代的趋势，头条号能够让自媒体创业者的内容精准地向用户推荐，减少了创业者寻找用户的成本，对自媒体人有强大的吸引力。T:威胁1、BAT与传统门户介入资讯市场。腾讯新闻借助微信与QQ两大流量入口，拥有大量的用户基础，在用户规模上居于首位。同时微信平台背后拥有超过2000万公众号，并聚集大量内容创作者，并且推出微信热文推荐，其原理与今日头条的数据挖掘与引擎推荐相一致。针对今日头条千人万元计划推出芒种计划，旨在扶持优质内容，并为内容创业者提供一键分发的权利。天天快报对标今日头条，与腾讯新闻客户端形成资讯产品双矩阵，显示了其争夺个性化资讯市场的决心。阿里巴巴以UC浏览器进行市场围攻，启动内容资讯的UC头条模式。百度形成百度号、百度新闻、百度贴吧产品矩阵。传统门户加大对个性化资讯的投入，有望绝地反击。个性资讯客户端号外将目标用户定位于90后，并将战线聚焦于三四线城市，大有一种以农村包围城市的味道。一点资讯与手机厂商OPPO合作，选择在手机端上游采用预装的方式获取用户。各种迹象表明，个性化资讯市场正面临着激烈的市场竞争。2、今日头条通过爬虫获取媒体网站的内容存在侵犯版权的风险，受到外界的质疑。八、总结张一鸣公开发言不愿意做腾讯的员工，今日头条与腾讯的联姻也宣布告吹，随之而来的必然是步步为营的市场围攻。有人说未来是互联网的世界，也是BAT的世界，但其中也不乏像今日头条这样的独角兽企业能够在BAT的围攻下坚强的生存下来并茁壮成长。张一鸣想要的不是BAT的光环，而是中国第一内容创作平台。总体而言，今日头条个性化的资讯推荐功能精确地满足用户碎片化利用时间的需求，拥有先发优势的今日头条掌握了大量的用户与行为数据，在以后的发展过程中更要做到商业变现与用户体验两者的平衡，并且要寻求多样化的变现形式。同时要加大对内容的监控力度，创造出一套完整的自媒体用户管理体制，提高内容的质量，增强平台的权威性。当然，今日头条是否能够真正独立于BAT体系之外呢？我们拭目以待。作者：陈镇鸿文章来源：人人都是产品经理
上一篇：下一篇：
Powered by
鸟哥笔记 联系地址：上海市闸北区共和新路层}