1. 程式人生 > >Android 之 tablayout+viewpager+fragment+toolbar+動態新增+自帶navigation

Android 之 tablayout+viewpager+fragment+toolbar+動態新增+自帶navigation

效果:

1、首先建立一個自帶navigation的專案


2、在MainActivity裡新增下列程式碼

(1)定義tablayout和viewpager


(1)fragment的集合以及自定義fragment和動態新增的fragment,tablayout,viewpager。

 (2)viewpager介面卡,構造方法設定資料來源,使tablayout和viewpager一一對應並實現聯動。

*:addview和myview的順序區別在於先後顯示哪個fragemnt,由於我數組裡面是先定義的是自定義新增控制元件,一一對應則序號1。

    List<Fragment> listFragment = new 
ArrayList<>();//viewpager中的fragment集合 MyViewFragment myViewFragment = new MyViewFragment(); listFragment.add(myViewFragment);//與上面的紅圈1對應AddViewFragment addViewFragment = new AddViewFragment(); listFragment.add(addViewFragment);//與上面的紅圈2對應 tabLayout = (TabLayout) findViewById(R.id.tablayout); viewPager
= (ViewPager) findViewById(R.id.viewpager); // ViewPagerAdapter mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),tabTitle,listFragment); //通過構造方法設定adapter的資料來源 viewPager.setAdapter(mViewPagerAdapter); tabLayout.setupWithViewPager(viewPager);

3、建立兩個fragment:AddviewFragment和MyViewFragment。

AddviewFragment:

(1)這裡的i是全域性變數,就是用來控制我每新增一個button的,因為後面有刪除,為了使其向後逐一刪除。

public class AddViewFragment extends Fragment {


    public AddViewFragment() {
        // Required empty public constructor
}
    private LinearLayout layout;
    private int i =0;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
        // Inflate the layout for this fragmenti
View inflate = inflater.inflate(R.layout.fragment_add_view, container, false);
layout = (LinearLayout) inflate.findViewById(R.id.addlayout);
Button addButton = (Button) inflate.findViewById(R.id.add_button);
Button removeButton = (Button) inflate.findViewById(R.id.remove_button);
Button button = new Button(getContext());
button.setText("button");
button.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
layout.addView(button);
addButton.setOnClickListener(new View.OnClickListener() {
            @Override
public void onClick(View view) {
                i++;
                final Button btn3 = new Button(getContext());
layout.addView(btn3);
btn3.setId(i);
btn3.setText("Button"+i);
btn3.setOnClickListener(new View.OnClickListener() {
                    @Override
public void onClick(View view) {
                        Toast.makeText(getContext(), btn3.getText().toString(), Toast.LENGTH_LONG).show();
}
                });
}
        });
removeButton.setOnClickListener(new View.OnClickListener() {
            @Override
public void onClick(View view) {
                if(i<=0){
                    Toast.makeText(getContext(), "沒有可以刪除的按鈕", Toast.LENGTH_LONG).show();
}
                else {
                    layout.removeView(layout.findViewById(i));
i--;
}
            }
        });
        return inflate;
}

MyViewFragment:

public class MyViewFragment extends Fragment {


    public MyViewFragment() {
        // Required empty public constructor
}


    @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
        // Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_my_view, container, false);
}

}

ViewPagerAdapter:

這裡的介面卡其實就是傳值給fragment,使其在相應的tabTitle下有值。下面三個可以看做是一個for迴圈。

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private String[] tabTitle;
    private List<Fragment> listFragment;
    public ViewPagerAdapter(FragmentManager fm, String[] tabTitle, List<Fragment> listFragment) {
        super(fm);
        this.tabTitle = tabTitle;
        this.listFragment = listFragment;
}

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


    @Override
public int getCount() {
        return tabTitle.length;
}


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

4、layout下xml檔案:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
</LinearLayout>

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
</LinearLayout>

content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
    <android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</LinearLayout>

fragment_add_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<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=".AddViewFragment">
<!-- TODO: Update blank fragment layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
        <Button
android:id="@+id/add_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="新增"
android:layout_weight="1"
/>
        <Button
android:id="@+id/remove_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="刪除"
android:layout_weight="1"
/>
    </LinearLayout>
    <LinearLayout
android:id="@+id/addlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
    </LinearLayout>
</LinearLayout>

fragment_my_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
tools:context=".MyViewFragment">
<!-- TODO: Update blank fragment layout -->
<com.example.mac.myapplication1.MyView
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>

nav_header_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/nav_header_desc"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@mipmap/ic_launcher_round" />
    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="@string/nav_header_title"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
    <TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/nav_header_subtitle" />
</LinearLayout>

5、menu下的檔案

activity_main_drawer.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
    <group android:checkableBehavior="single">
        <item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
        <item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
        <item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
        <item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
    </group>
    <item android:title="Communicate">
        <menu>
            <item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
            <item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
        </menu>
    </item>
</menu>

main.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
android:id="@+id/item00"
android:title="建立群組"
android:icon="@mipmap/add"
app:showAsAction="never">
    </item>
    <item
android:id="@+id/item01"
android:title="加好友/群"
android:icon="@mipmap/user"
app:showAsAction="never">
    </item>
    <item
android:id="@+id/item02"
android:title="掃一掃"
android:icon="@mipmap/scanf"
app:showAsAction="never">
    </item>
    <item
android:id="@+id/item03"
android:title="面對面快傳"
android:icon="@mipmap/file"
app:showAsAction="never">
    </item>
    <item
android:id="@+id/item04"
android:title="付款"
android:icon="@mipmap/erweima"
app:showAsAction="never">
    </item>
    <item
android:id="@+id/item05"
android:title="拍攝"
android:icon="@mipmap/camera"
app:showAsAction="never">
    </item>
</menu>

總結:奮鬥奮鬥大概就這樣了,如果對上面有什麼疑惑可以問我,有不好的請指出一起探討。謝謝害羞