仿爱奇艺UI界面

1、整体布局

是一个Activity，再一个Activity界面中填充不同的Fragment。
主界面是一个LinearLayout布局，在布局中放一个FrameLayout用来做显示填充页面的布局，之后再放一个LinearLayout布局，
根据页面显示效果设置权重，在布局中放一个RadioGroup，盛放RadioButton的容器，设置5个RadioButton用来监听点击的页面。分别创建5个Fragment页面，为RadioGroup添加事件监听，在点击了按钮的时候，填充不同的页面。

布局代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context="com.jinxudong.aiqiyiui.MainActivity$PlaceholderFragment" ><LinearLayoutandroid:id="@+id/ll_flg"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="6"android:orientation="horizontal" ></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:orientation="horizontal" ><RadioGroupandroid:id="@+id/btn_rg"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/category_drag_bg"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/ib_home"style="@style/Bottom_Tab_Style"android:background="@null"android:drawableTop="@drawable/home_selector"android:text="@string/phone_navi_shipin" /><RadioButtonandroid:id="@+id/ib_ib2"style="@style/Bottom_Tab_Style"android:background="@null"android:drawableTop="@drawable/ib2_selector"android:text="@string/phone_navi_find" /><RadioButtonandroid:id="@+id/ib_ib3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:background="@null"android:button="@null"android:drawablePadding="3dp"android:drawableTop="@drawable/ib3_selector"android:gravity="center"android:padding="5dp"android:text="@string/phone_navi_vip"android:textColor="@drawable/vip_text_selector" /><RadioButtonandroid:id="@+id/ib_ib5"style="@style/Bottom_Tab_Style"android:background="@null"android:drawableTop="@drawable/rb5_selector"android:text="@string/me" /><RadioButtonandroid:layout_gravity="center"android:id="@+id/ib_ib4"android:layout_width="80dp"android:layout_height="70dp"android:background="@drawable/ib4_selector"android:button="@null" /></RadioGroup></LinearLayout></LinearLayout>

逻辑代码如下:

package com.jinxudong.aiqiyiui;import com.example.aiqiyiui.R;import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;public class MainActivity extends Activity implements OnClickListener {private RadioGroup btn_rg;private RadioButton btn_rb;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);// 设置不显示titlesetContentView(R.layout.activity_main);// 初始化控件initView();}private void initView() {btn_rg = (RadioGroup) findViewById(R.id.btn_rg);btn_rb = (RadioButton) findViewById(R.id.ib_home);btn_rb.setChecked(true);FragmentManager fn = getFragmentManager();FragmentTransaction bt = fn.beginTransaction();bt.replace(R.id.ll_flg, new FirstActivity());bt.commit();btn_rg.setOnCheckedChangeListener(new OnCheckedChangeListener() {private FragmentManager fragmentManager;private FragmentTransaction transaction;@Overridepublic void onCheckedChanged(RadioGroup grou, int checkedId) {fragmentManager = getFragmentManager();transaction = fragmentManager.beginTransaction();switch (checkedId) {case R.id.ib_home:// showToast("点击了第一个");transaction.replace(R.id.ll_flg, new FirstActivity());break;case R.id.ib_ib2:// showToast("点击了服务");transaction.replace(R.id.ll_flg, new SecondActivity());break;case R.id.ib_ib3:// showToast("点击了会员");// ib_ib3.istransaction.replace(R.id.ll_flg, new ThridActivity());break;case R.id.ib_ib4:// showToast("离线");transaction.replace(R.id.ll_flg, new OffLine());break;case R.id.ib_ib5:// showToast("点击了我");transaction.replace(R.id.ll_flg, new ThridActivity());break;}transaction.commit();}});}public void showToast(String msg) {Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();}@Overridepublic void onClick(View arg0) {}
}

2、页面的填充

获得FragmentManager对象FragmentManager fragmentManager= getFragmentManager();，通过FragmentManager对象开启事FragmentTransaction transaction = fragmentManager.beginTransaction();点击不同的按钮填充不同的页面，transaction.replace(R.id.ll_flg, new FirstActivity());
replace(int containerViewId, Fragment fragment);有两个参数，第一个是填充的布局，之前在activity_Main中留下来的用来填充其他页面的布局文件，一般用FrameLayout。

3、视频界面

3.1整体布局的搭建

视频页面是第一个Fragment页面，是一个继承了Fragment的java类，重写onCreateView方法，在onCreateView方法中，通过inflater.inflate(R.layout.first_xml, null);填充页面，并用一个View对象接收，并return这个对象。这样就完成了页面的填充。
inflate(int resource, ViewGroup root)方法中有两个参数，第一个是为页面写的布局文件，可以通过R.layout.布局文件名找到布局，第二个一般设为null。
然后可以通过得到的View对象找到布局中的各个组件
如需要找到的ViewPager，可以写成pager = (ViewPager) view.findViewById(R.id.viewpager);
然后对这个Viewpager进行操作。
在视频界面中，最上层我是放了一个相对布局，再放一些ImageButton。接下来是一个搜索功能的搜索栏，因为后面几个页面都需要搜索页面，所以我将它提取出来，放到了一个xml中，然后在其他页面去引用这个xml文件，引用方法为
<includeandroid:layout_width="wrap_content"android:layout_height="wrap_content"layout="@layout/search_layout" />
接下来是一个导航栏，可以滑动，所以我用的一个HorizontalScrollView，可以实现滑动的效果，为了让页面看起开美观，android:scrollbars="none" 去掉了滑动时显示的线。在HorizontalScrollView中放了一个ViewGroup，然后放了很多RadioButton，这个的实现原理和主页切换不同fragment页面相似，只是这里需要切换的是不同的ViewPager。
pager.setCurrentItem(0);方法用来切换不同的Viewpager界面

3.2填充数据。

Viewpager显示也需要填充不同的数据达到我们需要的效果，为ViewPager填充数据时需要设置适配器pager.setAdapter(new PagerAdapter({}));这里需要实现几个方法。instantiateItem方法是在加载某一个ViewPager的时候调用的。
destroyItem方法是在销毁某一页面的时候调用，ViewPager默认会加载当前页面和前后各一个页面的内容，其他的都会被销毁。
isViewFromObject：直接写return arg0 == arg1;就Ok了。
getCount():可以写存放页面的集合的长度。
为ViewPager设置事件
pager.setOnPageChangeListener(new OnPageChangeListener()
为了使页面的滑动能和导航栏的条目对应，需要在ViewPager的监听中设置HorizontalScrollView每次滑动多少距离
int swith = tabpager.getWidth();
tabpager.smoothScrollBy(rb.getRight() - (swith + offset), 0);
offset += rb.getRight() - (swith + offset);

布局代码如下

package com.jinxudong.aiqiyiui;import java.util.ArrayList;import com.example.aiqiyiui.R;import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView.FindListener;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;public class FirstActivity extends Fragment {ViewPager pager = null;HorizontalScrollView tabpager = null;ArrayList<View> viewContainer = new ArrayList<View>();ArrayList<View> viewTV = new ArrayList<View>();ArrayList<View> viewTab = new ArrayList<View>();ImageView ivTv;private Activity activity;private RadioGroup ll_hs;private int offset = 0;private ViewPager tv_viewPager;private int[] imageId;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);activity = getActivity();}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(R.layout.first_xml, null);pager = (ViewPager) view.findViewById(R.id.viewpager);tabpager = (HorizontalScrollView) view.findViewById(R.id.tabpager);ll_hs = (RadioGroup) view.findViewById(R.id.ll_hs);View v1 = LayoutInflater.from(activity).inflate(R.layout.pager, null);View v2 = LayoutInflater.from(activity).inflate(R.layout.pager1, null);View v3 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v4 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v5 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v6 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v7 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v8 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v9 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v0 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v11 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v12 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);View v13 = LayoutInflater.from(activity).inflate(R.layout.pager3, null);viewContainer.add(v1);viewContainer.add(v2);viewContainer.add(v3);viewContainer.add(v4);viewContainer.add(v5);viewContainer.add(v6);viewContainer.add(v7);viewContainer.add(v8);viewContainer.add(v9);viewContainer.add(v0);viewContainer.add(v11);viewContainer.add(v12);viewContainer.add(v13);String[] strTab = { "推荐", "上学啦", "订阅", "电视剧", "电影", "综艺", "动漫", "资讯","娱乐", "搞笑", "少儿", "原创", "爱频道" };for (int i = 0; i < strTab.length; i++) {RadioButton childAt = (RadioButton) ll_hs.getChildAt(i);childAt.setText(strTab[i]);}((RadioButton) ll_hs.getChildAt(0)).setChecked(true);ll_hs.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup arg0, int arg1) {switch (arg1) {case R.id.rb_1:pager.setCurrentItem(0);break;case R.id.rb_2:pager.setCurrentItem(1);break;case R.id.rb_3:pager.setCurrentItem(2);break;case R.id.rb_4:pager.setCurrentItem(3);break;case R.id.rb_5:pager.setCurrentItem(4);break;case R.id.rb_6:pager.setCurrentItem(5);break;case R.id.rb_7:pager.setCurrentItem(6);break;case R.id.rb_8:pager.setCurrentItem(7);break;case R.id.rb_9:pager.setCurrentItem(8);break;case R.id.rb_10:pager.setCurrentItem(9);break;case R.id.rb_11:pager.setCurrentItem(10);break;case R.id.rb_12:pager.setCurrentItem(11);break;case R.id.rb_13:pager.setCurrentItem(12);break;}}});pager.setAdapter(new PagerAdapter() {@Overridepublic Object instantiateItem(ViewGroup container, int position) {((ViewPager) container).addView(viewContainer.get(position));return viewContainer.get(position);}@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {((ViewPager) container).removeView(viewContainer.get(position));}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return viewContainer.size();}});pager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {((RadioButton) ll_hs.getChildAt(arg0)).setChecked(true);// 设置HorizontalScrollView滑动样式if (arg0 >= 1 && arg0 <= 10) {RadioButton rb = (RadioButton) ll_hs.getChildAt(arg0);int swith = tabpager.getWidth();tabpager.smoothScrollBy(rb.getRight() - (swith + offset), 0);offset += rb.getRight() - (swith + offset);}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});new InflatFirst(v1, activity);return view;}@Overridepublic void onDestroy() {super.onDestroy();InflatFirst.isRunning = false;}
}

运行效果图:

仿爱奇艺UI界面(第一天)相关推荐

仿爱奇艺H5电影站v1.1源码
简介: 一个近乎纯前端的H5影视程序,高仿爱奇艺APP界面,资源全面,更新及时,搜索功能强大,VIP影视免费看,微商公号吸粉利器.本影视站源码采用PHP实时抓取可用资源,以文本缓存方式缓存存储,程序运 ...
html实现视频网站,仿爱奇艺,搜狐,迅雷看看(附源码)
文章目录 1.功能模板 1.1 仿爱奇艺 1.2 仿搜狐视频 1.3 仿迅雷看看 1.4 视频播放 1.5 影视公司官网 2.效果和源码 2.1 源代码 2.2 模板目录源码下载作者:xcLeig ...
Android源码之高仿爱奇艺
Android源码之高仿爱奇艺支持平台:Android 运行环境:Eclipse 开发语言:Java 下载地址:http://www.devstore.cn/code/info/306.h ...
仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...
android高仿奇艺影视,android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的 ...
爱奇艺首页底部导航按钮android,仿爱奇艺/腾讯视频ViewPager导航条实现
仿爱奇艺/腾讯视频ViewPager导航条实现,支持自定义导航条高度,宽度,颜色变化,字体大小变化.支持多种滚动模式,支持自定义每个TabView的样式.项目地址:https://github.com ...
苹果cms v8模板高仿爱奇艺带PC+手机模板
介绍: 苹果cms v8模板高仿爱奇艺带PC+手机模板网盘下载地址: http://kekewl.net/frgNDYcaQne0 图片:
仿爱奇艺加载dialog
仿爱奇艺在加载视频时的动画,想上张图: gif的效果有点卡,先说一下实现的方法, 主要的难点在于怎样将三角形画到空间的中间,我通过三角形中心到顶角的距离来确定三角形的大小, 当三角形在中间时角a的大小 ...
仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图介绍（一）
请尊重分享成果,转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52327435 前言:本篇只是一个介绍这个一个类库,具体实现思路代码会下 ...

仿爱奇艺UI界面(第一天)

仿爱奇艺UI界面

1、整体布局

2、页面的填充

3、视频界面

3.1整体布局的搭建

3.2填充数据。

仿爱奇艺UI界面(第一天)相关推荐

最新文章

热门文章