仿愛奇藝UI界面(第一天)

仿愛奇藝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" >

    <LinearLayout
        android:id="@+id/ll_flg"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6"
        android:orientation="horizontal" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <RadioGroup
            android:id="@+id/btn_rg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/category_drag_bg"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/ib_home"
                style="@style/Bottom_Tab_Style"
                android:background="@null"
                android:drawableTop="@drawable/home_selector"
                android:text="@string/phone_navi_shipin" />

            <RadioButton
                android:id="@+id/ib_ib2"
                style="@style/Bottom_Tab_Style"
                android:background="@null"
                android:drawableTop="@drawable/ib2_selector"
                android:text="@string/phone_navi_find" />

            <RadioButton
                android: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" />

            <RadioButton
                android:id="@+id/ib_ib5"
                style="@style/Bottom_Tab_Style"
                android:background="@null"
                android:drawableTop="@drawable/rb5_selector"
                android:text="@string/me" />

            <RadioButton
                android: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;

    @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文件，引用方法爲
<include
    android: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;

    @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;
    }
}

運行效果圖: