仿爱奇艺UI界面(第一天)
仿爱奇艺UI界面
1、整体布局
是一个Activity，再一个Activity界面中填充不同的Fragment。
主界面是一个LinearLayout布局，在布局中放一个FrameLayout用来做显示填充页面的布局，之后再放一个LinearLayout布局，
根据页面显示效果设置权重，在布局中放一个RadioGroup，盛放RadioButton的容器，设置5个RadioButton用来监听点击的页面。分别创建5个Fragment页面，为RadioGroup添加事件监听，在点击了按钮的时候，填充不同的页面。
布局代码如下:
"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" >
"@+id/ll_flg"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:orientation="horizontal" >
</LinearLayout>
"
android:layout_width=" match_parent"
android:layout_height="match_parent"
android:background="@drawable/category_drag_bg"
android:orientation="horizontal" >
@+ id/ib_home"
style="@style/Bottom_Tab_Style"
android:background="@null"
android:drawableTop="@drawable/home_selector"
android:text="@string/phone_navi_shipin" />
@+ id/ib_ib2"
style="@style/Bottom_Tab_Style"
android:background="@null"
android:drawableTop="@drawable/ib2_selector"
android:text="@string/phone_navi_find" />
@+ 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" />
@+ id/ib_ib5"
style="@style/Bottom_Tab_Style"
android:background="@null"
android:drawableTop="@drawable/rb5_selector"
android:text="@string/me" />
"
android:id=" @+id/ib_ib4"
android:layout_width="80dp"
android:layout_height="70dp"
android:background="@drawable/ib4_selector"
android:button="@null" />
逻辑代码如下:
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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);// 设置不显示title
setContentView(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;
@Override
public 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.is
transaction.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();
}
@Override
public 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文件，引用方法为
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 viewContainer = new ArrayList();
ArrayList viewTV = new ArrayList();
ArrayList viewTab = new ArrayList();
ImageView ivTv;
private Activity activity;
private RadioGroup ll_hs;
private int offset = 0;
private ViewPager tv_viewPager;
private int[] imageId;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
activity = getActivity();
}
@Override
public 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() {
@Override
public 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() {
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainer.get(position));
return viewContainer.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainer.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getCount() {
return viewContainer.size();
}
});
pager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public 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);
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
new InflatFirst(v1, activity);
return view;
}
@Override
public void onDestroy() {
super.onDestroy();
InflatFirst.isRunning = false;
}
}
运行效果图: