Android实现网易新闻客户端首页效果_Android

关于实现网易新闻客户端的界面,以前写过很多博客,请参考:

Android实现网易新闻客户端效果

Android实现网易新闻客户端侧滑菜单(一)

Android实现网易新闻客户端侧滑菜单(二)

今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现。

ViewPagerIndicator是一款分页指标小部件兼容ViewPager,封装上做得非常不错,目前已为众多知名应用所使用。具体API的使用,大家可以下载官方demo示例研究研究就知道啦!

下载地址:https://github.com/JakeWharton/ViewPagerIndicator

sample是提供给我们的例子,library是库工程,我们需要将其作为我们自己项目的依赖库,我们新建一个Android工程,将library导入工程我就不介绍了。

注:

Eclipse: 如果你新建的项目libs目录下面有android-support-v4.jar,你要将其删除,因为ViewPageIndicator里面有这个库,我们项目中不允许两个android-support-v4.jar,不删除我们的项目不能编译的。

Android Studio: 直接import module就行。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" > 

 <include layout="@layout/activity_top" /> 

 <com.viewpagerindicator.TabPageIndicator
 android:id="@+id/indicator"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@android:color/transparent" >
 </com.viewpagerindicator.TabPageIndicator> 

 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#EEF3FA">
 </android.support.v4.view.ViewPager>
</LinearLayout>

布局很简单,顶部引入了一个activity_top.xml的布局,具体内容可以自己定义。
MainActivity.java

package com.jackie.neteasenews; 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager; 

import com.viewpagerindicator.TabPageIndicator; 

import java.util.ArrayList;
import java.util.List; 

public class MainActivity extends FragmentActivity {
 private TabPageIndicator mTabPageIndicator;
 private ViewPager mViewPager;
 private ViewPagerIndicatorAdapter mAdapter; 

 private HeadlineFragment mHeadlineFragment;
 private EnjoyFragment mEnjoyFragment;
 private HotspotFragment mHotspotFragment;
 private SportFragment mSportFragment;
 private HouseFragment mHouseFragment;
 private List<Fragment> mFragmentList; 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main); 

 initView();
 } 

 private void initView() {
 mTabPageIndicator = (TabPageIndicator) findViewById(R.id.indicator);
 mViewPager = (ViewPager) findViewById(R.id.viewpager); 

 mHeadlineFragment = new HeadlineFragment();
 mEnjoyFragment = new EnjoyFragment();
 mHotspotFragment = new HotspotFragment();
 mSportFragment = new SportFragment();
 mHouseFragment = new HouseFragment(); 

 mFragmentList = new ArrayList<>();
 mFragmentList.add(mHeadlineFragment);
 mFragmentList.add(mEnjoyFragment);
 mFragmentList.add(mHotspotFragment);
 mFragmentList.add(mSportFragment);
 mFragmentList.add(mHouseFragment); 

 mAdapter = new ViewPagerIndicatorAdapter(getSupportFragmentManager(), mFragmentList);
 mViewPager.setAdapter(mAdapter); 

 //实例化TabPageIndicator然后设置ViewPager与之关联
 mTabPageIndicator.setViewPager(mViewPager, 1);
 }
} 

ViewPagerIndicatorAdapter.java

package com.jackie.neteasenews; 

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter; 

import java.util.List; 

public class ViewPagerIndicatorAdapter extends FragmentPagerAdapter {
 private List<Fragment> mFragmentList; 

 public static String[] TITLES = new String[] { "头条", "娱乐", "热点", "体育", "房产" }; 

 public ViewPagerIndicatorAdapter(FragmentManager fm, List<Fragment> fragmentList) {
 super(fm);
 this.mFragmentList = fragmentList;
 } 

 @Override
 public Fragment getItem(int position) {
 return mFragmentList.get(position);
 } 

 @Override
 public int getCount() {
 return mFragmentList.size();
 } 

 @Override
 public CharSequence getPageTitle(int position) {
 return TITLES[position];
 }
} 

代码很简单,但是有一点,上面的Indicator是系统默认的,不太好看,所以还需要在styles.xml添加下面的样式:

<style name="StyledTabPageIndicator" parent="@android:style/Theme.Light">
 <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
 <item name="android:windowNoTitle">true</item>
 <item name="android:animationDuration">5000</item>
 <item name="android:windowContentOverlay">@null</item>
 </style> 

 <style name="CustomTabPageIndicator" parent="Widget">
 <item name="android:gravity">center</item>
 <item name="android:background">@drawable/tab_indicator</item>
 <!--<item name="android:background">@drawable/vpi__tab_indicator</item>-->
 <item name="android:paddingLeft">22dip</item>
 <item name="android:paddingRight">22dip</item>
 <item name="android:paddingTop">8dp</item>
 <item name="android:paddingBottom">8dp</item>
 <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
 <item name="android:textSize">16sp</item>
 <item name="android:maxLines">1</item>
 </style> 

 <style name="CustomTabPageIndicator.Text" parent="Widget">
 <item name="android:textColor">@drawable/tab_text</item>
 </style>

注意:开发中过程中跟Fragment相关的类,导入包时会提示两个包android.app 和 android.support.v4.app,切记,要保证所有类都导入同一个包下的,否则会编译报错。

效果图如下:

附上源码地址:https://github.com/shineflower/NeteaseNews.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索Android网易新闻
Android新闻客户端
android 淘宝首页实现、android天猫首页实现、android 复杂首页实现、阿里旅行客户端首页、lol客户端首页,以便于您获取更多的相关知识。

时间: 2024-08-04 11:00:48

Android实现网易新闻客户端首页效果_Android的相关文章

Android实现网易新闻客户端首页效果

关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现. ViewPagerIndicator是一款分页指标小部件兼容ViewPager,封装上做得非常不错,目前已为众多知名应用所使用.具体API的使用,大家可以下载官方demo示例研究研究就知道啦! 下

Android实现网易新闻客户端侧滑菜单(2)_Android

前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一) 今天通过自定义View来实现这种功能. 代码如下: SlideMenu.java package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view

Android实现网易新闻客户端侧滑菜单(2)

前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一) 今天通过自定义View来实现这种功能. 代码如下: SlideMenu.java package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view

Android实现网易新闻客户端侧滑菜单(1)_Android

Android中很多产品(比如360手机助手.网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1.能把更多的展现内容都存放在菜单中 2.设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用三方开源库更简单. SlidingMenu:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果. 地址:https://github.com/

Android实现网易新闻客户端侧滑菜单(1)

Android中很多产品(比如360手机助手.网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1.能把更多的展现内容都存放在菜单中 2.设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用三方开源库更简单. SlidingMenu:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果. 地址:https://github.com/

仿于网易新闻客户端首页新闻轮播的IOS组件

一.需求分析 1.可横向循环滚动新闻图片 2.滚动到对应图片时显示新闻标题 3.每张新闻图片可点击 4.有pageControl提示 5.具有控件的扩展能力 二.设计实现 1.显示图片使用SDWebImage第三方库,可缓存图片.通过url异步加载图片 2.使用一个横向滚动的UITableView实现循环滚动 3.使用一个黑色半透明的背景.白色文字的UILabel显示标题 4.定义每个新闻的数据结构: /** @brief 默认使用本地地址,如果本地没有的话,使用网络图片 */   @inter

模仿android网易新闻客户端左右动画效果

http://www.cnblogs.com/and_he/archive/2012/03/31/2426248.html 一.摘要 偶然在一个论坛上面看到有人模拟网易新闻客户端首页顶部那个组件效果,一时兴起,也来自己动手完整地模拟一个,包括顶部的特效组件和底部的类似于TabHost的组件.下面就动手一步一步地Coding...二.效果截图 三.底部类似TabHost组件切换效果的实现为了便于大家亲自动手实践,这里的讲解顺序就按照开发的顺序来讲,所以先做这个底部的"TabHost",然

Android SlidingMenu 仿网易新闻客户端布局

前面两篇文章中的SlidingMenu都出现在左侧,今天来模仿一下网易新闻客户端左右两边都有SlidingMenu的效果,以下是网易新闻客户端效果:               不扯闲话了,直接进入正题吧   frame_content.xml   [html] view plaincopy   <?xml version="1.0" encoding="utf-8"?>   <FrameLayout xmlns:android="htt

Android实现仿网易新闻主界面设计_Android

下面先来一张效果图    根据图片分析,要实现的有侧边栏DrawerLayout,ActionBar的颜色和菜单以及ActionBarDrawerToggle的动画效果. 在这之前,Theme要改成带有ActionBar的主题 android:theme="@android:style/Theme.Holo.Light" 一:侧边栏-DrawerLayout 根据官方文档,DrawerLayout布局的第一个视图是activity的主视图,第二个是侧边栏视图 因此主布局可以如下这样 F