Android开发之开发者头条APP(三)实现首页

相关阅读:

Android开发之开发者头条(一)启动页实现

Android开发之开发者头条(二)实现左滑菜单

title: 带你实现开发者头条APP(三) 首页实现

tags: 轮播广告,ViewPager切换,圆形图片

grammar_cjkRuby: true

一.前言

今天实现开发者头条APP的首页。是本系列的第三篇文章,效果图如下:

从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表。

二.外层三个tab实现

我这里用Viewpager实现的,可以左右滑动,灵活的隐藏下面fragment的显示隐藏。

1.布局文件

布局文件比较简单,上面包涵三个TextView的RelativeLayout + 下面的ViewPager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white_normal">
<RelativeLayout
android:id="@+id/ll_title"
android:layout_width="match_parent"
android:layout_height="44dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/main_color"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_selected"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="精选"
android:textColor="@drawable/main_title_txt_sel" />
<TextView
android:id="@+id/tv_subscribe"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="订阅"
android:textColor="@drawable/main_title_txt_sel" />
<TextView
android:id="@+id/tv_find"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="发现"
android:textColor="@drawable/main_title_txt_sel" />
</LinearLayout>
<View
android:id="@+id/view_indicator"
android:layout_width="15dp"
android:layout_height="2dp"
android:layout_alignParentBottom="true"
android:background="@color/white_normal" />
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/ll_title"/>
</RelativeLayout> 

2.初始化三个Fragment 并且填充到ViewPager,给ViewPager设置改变监听。

vPager = (ViewPager) rootView.findViewById(R.id.viewpager_home);
SelectedFragment selectedFragment=new SelectedFragment();
SubscribeFragment subscribeFragment=new SubscribeFragment();
FindFragment findFragment=new FindFragment();
list.add(selectedFragment);
list.add(subscribeFragment);
list.add(findFragment);
adapter = new FragmentAdapter(getActivity().getSupportFragmentManager(),list);
vPager.setAdapter(adapter);
vPager.setOffscreenPageLimit(2);
vPager.setCurrentItem(0);
vPager.setOnPageChangeListener(pageChangeListener); 

3.FragmentAdapter.java

继承FragmentStatePagerAdapter,Viewpager填充适配器,实现起来很简单。

/**
* ViewPager适配器
* @author ansen
* @create time 2016-04-18
*/
public class FragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;

public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}

public FragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
@Override
public int getCount() {
return list.size();
}
}

4.指示器初始化

当我们Viewpager滑动的时候需要滑动指示器,并且指示器的宽度占屏幕的三分之一,所以我们需要在activity创建的时候给指示器赋值哦,并且移动到起始位置。

private void initCursorPosition(){
LayoutParams layoutParams=viewIndicator.getLayoutParams();
layoutParams.width=screenWidth/3;
viewIndicator.setLayoutParams(layoutParams);
TranslateAnimation animation = new TranslateAnimation(-screenWidth/3,0,0,0);
animation.setFillAfter(true);
viewIndicator.startAnimation(animation);
}

5.Viewpager切换时应该做什么?

1).移动指示器

2).改变文字颜色

3).设置当前选中,指示器移动的时候需要用到。

private OnPageChangeListener pageChangeListener=new OnPageChangeListener() {
@Override
public void onPageSelected(int index){
translateAnimation(index);//移动指示器
changeTextColor(index);//改变文字颜色
currentIndex=index;//设置当前选中
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}
@Override
public void onPageScrollStateChanged(int arg0) {}
}; 

6.指示器移动方法translateAnimation

传入一个下标判断当前位置,然后判断上次的位置,知道从哪里移动到哪个位置,然后开启android自带的移动动画。

private void translateAnimation(int index){
TranslateAnimation animation = null;
switch (index){
case 0://订阅->精选
animation=new TranslateAnimation((screenWidth/3),0,0,0);
break;
case 1://
if(0==currentIndex){//精选->订阅
animation=new TranslateAnimation(0,screenWidth/3,0,0);
}else if(2==currentIndex){//发现->订阅
animation=new TranslateAnimation((screenWidth/3)*2,screenWidth/3,0,0);
}
break;
case 2://订阅-》发现
animation=new TranslateAnimation(screenWidth/3,(screenWidth/3)*2,0,0);
break;
}
animation.setFillAfter(true);
animation.setDuration(300);
viewIndicator.startAnimation(animation);
}

7.获取屏幕宽高

我这边把方法写在activity里面,在工作中大家最好把他放到工具类里面。

private void getScreenSize(Activity context) {
DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
screenHeight = dm.heightPixels;
}

三."精选" Fragment实现

从整体来看,就是一个ListView,顶部轮播是ListView的头部。头部轮播也是用的ViewPager实现,起始这里跟我们第一篇文章讲的开发者头条APP启动页实现原理很相似。然后再加一个定时器隔一段时间设置ViewPager的当前页面即可。

说明:我们这里的图片用的是静态的,一个商业APP轮播图片肯定是从服务器获取的,开发者头条app就是从服务器获取。

1.头布局文件

就是一个ViewPager+装载点点点的LinearLayout 然后外层布局设置一个高度200dp

<?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"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="200dp" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:text="公众号:ansen_666" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:gravity="center_horizontal"
android:orientation="horizontal"/>
</RelativeLayout>
</RelativeLayout>
</LinearLayout> 

2.可滑动的静态图片实现

初始化轮播的Viewpager,初始化点点点View,并且加入线性布局,最后把整个布局加入ListView头部。

viewPager = (ViewPager)headView.findViewById(R.id.viewpager);
selectedPagerAdapter=new SelectedPagerAdapter(getActivity(),carousePagerSelectView);
viewPager.setOffscreenPageLimit(2);
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(onPageChangeListener);
viewPager.setAdapter(selectedPagerAdapter);
ViewGroup group = (ViewGroup) headView.findViewById(R.id.viewGroup);// 初始化底部显示控件
tips = new ImageView[3];
for (int i = 0; i < tips.length; i++){
ImageView imageView = new ImageView(getActivity());
if (i == 0) {
imageView.setBackgroundResource(R.drawable.page_indicator_focused);
} else {
imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);
}
tips[i] = imageView;
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
layoutParams.leftMargin = 10;// 设置点点点view的左边距
layoutParams.rightMargin = 10;// 设置点点点view的右边距
group.addView(imageView, layoutParams);
}
listView=(ListView) rootView.findViewById(R.id.list);
listView.addHeaderView(headView); 

3.如何实现轮播效果

我这边是用Timer+Handler实现,Timer用来计时,Handler用来更新UI。

注意事项:

1).在轮播的时候需要判断是否已经最后一页

2).更新UI需要在主线程。

private Timer timer;
private final int CAROUSEL_TIME = 3000;//滚动间隔 timer = new Timer(true);//初始化计时器
timer.schedule(task, 0, CAROUSEL_TIME);//延时0ms后执行,3000ms执行一次 TimerTask task = new TimerTask() {
public void run() {
handler.sendEmptyMessage(CAROUSEL_TIME);
}
}; private Handler handler=new Handler(){
public void handleMessage(Message msg) {
switch (msg.what) {
case CAROUSEL_TIME:
if(currentIndex>=tips.length-1){//已经滚动到最后,从第一页开始
viewPager.setCurrentItem(0);
}else{//开始下一页
viewPager.setCurrentItem(currentIndex+1);
}
break;
}
};
};

关于Android开发之开发者头条APP(三)实现首页的相关介绍,就给大家介绍这么多,希望对大家有所帮助!

(0)

相关推荐

  • 详解在PHP的Yii框架中使用行为Behaviors的方法

    一个绑定了行为的类,表现起来是这样的: // Step 1: 定义一个将绑定行为的类 class MyClass extends yii\base\Component { // 空的 } // Step 2: 定义一个行为类,他将绑定到MyClass上 class MyBehavior extends yii\base\Behavior { // 行为的一个属性 public $property1 = 'This is property in MyBehavior.'; // 行为的一个方法 p

  • Android模仿知乎的回答详情页的动画效果

    废话不多说,咱们第一篇文章就是模仿"知乎"的回答详情页的动画效果,先上个原版的效果图,咱们就是要做出这个效果 在实现之前,我们先根据上面的动画效果,研究下需求,因为gif帧数有限,所以不是很连贯,推荐你直接下载一个知乎,找到这个界面自己玩玩 ☞当文章往上移动到一定位置之后,最上面的标题栏Bar和问题布局Title是会隐藏的,回答者Author布局不会隐藏 ☞当文章往下移动移动到一定位置之后,原先隐藏的标题栏Bar和问题布局Title会下降显示 ☞当文章往上移动的时候,下部隐藏的Tool

  • ThinkPHP行为扩展Behavior应用实例详解

    本文以实例的形式详细介绍了ThinkPHP的行为扩展Behavior的实现方法,有助于读者更灵活的掌握ThinkPHP的开发,具体步骤如下: ThinkPHP 行为扩展 (Behavior) 流程: 最先是读取配置文件信息: $mode = include is_file(CONF_PATH.'core.php')?CONF_PATH.'core.php':MODE_PATH.APP_MODE.'.php'; 读取配置文件信息 ThinkPHP\Mode\common.php // 行为扩展定义

  • Android仿即刻首页垂直滚动图,炫酷到底!

    项目地址:https://github.com/JeasonWong/JikeGallery 话不多说,先上效果. 这个效果是在即刻app上看到,觉得很不错,遂仿之. 先说下我的实现思路(以上方的图片滚动为例,下方的文字实现效果类似): 自定义ViewGroup 装载两个ImageView和一个阴影View 通过一定规律交替控制两个ImageView和它们的marginTop,在onLayout()中实现 marginTop的具体值由属性动画控制,不断调用requestLayout() 接下来依

  • Material Design系列之Behavior实现Android知乎首页

    本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

  • Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果

    今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下单时选择商品属性时,从下面浮动上来一个PopupWindow,那么今天就带大家用Behavior来实现这两个效果,结果你会发现简直只需要一行代码. 总结下现在用的APP: 1. 仿支付宝弹出的输入支付密码窗口. 2. 仿淘宝/天猫弹出商品属性选择框. 3. 知乎首页上下滑动隐藏ToolBar和NavigationBar. 4. - 系列博客: 1. Material Design系列,Behavior之Bottom

  • Material Design系列之Behavior上滑显示返回顶部按钮

    效果预览 源码在文章末尾. 引文 有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮. 今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现.那么我们传统的方式来做就是监听这个滑动View,比如:ScrollView/ListView/RecyclerView/GridView等,那么如果我们使用了CoordinatorLayout,

  • 浅谈JavaScript的Polymer框架中的behaviors对象

    localStorage 应是家喻户晓的?但本地存储这个家族可远不止它.以前扯过 sessionStorage,现在还有个神奇的 CacheStorage.它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也能做,但是它可能更专业. CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中.CacheStorage 是多个 Cache 的集

  • Material Design系列之自定义Behavior支持所有View

    本文实例为大家分享了Android自定义Behavior支持所有View ,供大家参考,具体内容如下 一.实现效果图 这个右下角的FAB,动画当然可以多种多样,可以放在界面的任何地方,我们这里只举个例子.但是v7包中提供的Behavior目前只能是FloatingActionButton来用,所以今天我们实现的这个Behavior是支持所有的View的,可以用在ImageView.Button.Layout,只要是继承View的类都可以用. 二.自定义Behavior和动画的封装 我们知道Beh

  • Android开发之开发者头条APP(三)实现首页

    相关阅读: Android开发之开发者头条(一)启动页实现 Android开发之开发者头条(二)实现左滑菜单 title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true 一.前言 今天实现开发者头条APP的首页.是本系列的第三篇文章,效果图如下: 从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表. 二.外层三个ta

  • Android开发之开发者头条(一)启动页实现

    废话就不多说了,开始今天的正题,带你实现开发者头条APP的启动页. 一.老规矩,先上效果图 从效果图中我们可以看出,整个滑动的界面就是一个ViewPager实现,然后监听ViewPager的滑动事件,改变底部四个小图标的切换,以及跳转到首页的按钮的隐藏显示. 二.代码实现 1).整个布局文件.上面是ViewPager,下面是四个小图标存放的容器. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi

  • Android开发之开发者头条(二)实现左滑菜单

    在上篇文章给大家介绍了Android开发之开发者头条(一)启动页实现,感兴趣的朋友可以参考下. title: 带你实现开发者头条(二) 实现左滑菜单 tags: 左滑菜单,android 自带侧滑,DrawerLayout grammar_cjkRuby: true 今天开始模仿开发者头条的侧滑菜单,是本系列第二篇文章,相信大家已经看到很多app使用这种侧滑.今天我来教大家用android自带DrawerLayout控件实现. DrawerLayout是SupportLibrary包中实现了侧滑

  • Android开发实现图片切换APP

    本文实例为大家分享了Android开发实现图片切换APP的具体代码,供大家参考,具体内容如下 本次介绍的是关于图片切换的APP,这里实现了两种切换效果: 不同的效果针对不同的情况,两种效果的代码都会介绍: 代码-布局: main.xml的代码: <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="

  • Android开发中如何去掉app标题栏的实现

    方法 一.若创建Activity时继承的是 Activity: 第一种:常用的一种方法: requestWindowFeature(Window.FEATURE_NO_TITLE);//这行代码必须写在setContentView()方法的前面 package com.wust.selfviewgroup; import androidx.appcompat.app.AppCompatActivity; import android.app.Activity; import android.os

  • Android开发中优秀的app 异常处理机制

    一个好的app 异常处理机制 我认为应该至少包含以下几个功能: 1.能把错误信息上传到服务器  让开发者可以持续改进app 2.错误信息至少应该包含 是否在主进程 是否在主线程 等可以帮助程序员定位的信息 3.最好包含手机硬件及软件信息. 4.主进程引发的异常 最好交由系统自己处理 也就是让用户可以感知到 那种(当然你也可以自己定义一套更有意思的感知系统对话框等,具体可参考各种有意思的404界面) 5.子进程引发的异常最好别让用户感知到.比如push之类的 这种 和用户感知弱关联的这种.最好发生

  • Android开发使用WebView打造web app示例代码

    目录 前言 代码如下 前言 博主最近想做一款app,因为内容已经有了,故想到了使用WebView来做 ,现将代码贴出如下,供有同样需求的人参考,少走弯路 代码如下 public class MainActivity extends Activity{ private WebView webview; private Handler handler; private ProgressDialog pd; @Override public void onCreate(Bundle savedInst

  • 利用adt-bundle轻松搭建Android开发环境与Hello world(Linux)

    本文与<利用adt-bundle轻松搭建Android开发环境与Hello world(Windows) >是姊妹篇,只是这次操作换成了Linux .拿Ubuntu做例子.还是与Windows一样.由于JDK+Eclipse+ADT+SDK或者JDK+Android Studio在安装的过程中非得联网不可.因此也选用了JDK1.7+解压即用的官方绿色版Android开发环境adt-bundle20131030去安装. 一.基本准备 首先还是与<Debian配置JDK1.7 与Linux

  • Android开发自学笔记(三):APP布局上

    hello,大家好,本文主要介绍如何开始开发一个美观.有情调.人见人爱的Android应用程序,已知我们在市面上有不少布局极其精美,在视觉上让人爱不释手的应用程序,如果让我们着手开发,我们该如何下手? 在移动互联网公司都有这样几个部门–UX/UE及UI,UX有的也称作UE是指做用户体验的是User Experience的缩写,这些人一般都毕业于美术学院专门搞设计,我们上面说到那些精美的程序往往都是由他们的手先设计出效果图,然后交由UI,也称GUI即Graphic User Interface或者

  • 安卓(Android)开发之统计App启动时间

    前言 作为 Android 开发者,想必多多少少要接触启动速度优化相关的事情,当用户越来越多,产品的功能也随着迭代越来越多,App 逐渐变得臃肿是一件很常见的现象,甚至可以说是不可避免的现象,随之而来的工作就是优化 App 性能,其中最主要的一项就是启动速度优化.但本文的主角并不是启动速度优化,而是启动时间统计. 一.启动类型 工欲善其事,必先利其器.想要优化 App 的启动速度,必须有准确衡量启动时间的方法,否则优化完之后效果怎样,自己都不知道,说出去别人也不信服不是.在做 App 启动时间统

随机推荐