2016年12月9日 星期五

TabLayout頁面切換教學(Part2)

前提回顧:

TabLayout頁面切換教學(Part1)

上一篇已經把所有xml定義完了,接下來就要來寫code囉!

建立一個ViewPager的容器 new->java.class

Name:ViewPagerAdapter
Superclass: android.support.v4.app.FragmentPagerAdapter(要繼承介面改寫)





















package com.example.andy6804tw.tabbed;



import android.support.v4.app.FragmentManager;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentPagerAdapter;



import java.util.ArrayList;



/**

 * Created by andy6804tw on 2016/12/6.

 */



public class ViewPagerAdapter extends FragmentPagerAdapter {



   ArrayList<Fragment>fragments=new ArrayList<>();

    ArrayList<String>tabTitles=new ArrayList<>();



    public void addFragments(Fragment fragment,String titles){

        this.fragments.add(fragment);

        this.tabTitles.add(titles);

    }



    public ViewPagerAdapter(FragmentManager fm){

    super(fm);

    }



    @Override

    public Fragment getItem(int position) {

        return fragments.get(position);

    }



    @Override

    public int getCount() {

        return fragments.size();

    }



    @Override

    public CharSequence getPageTitle(int position) {

        return tabTitles.get(position);

    }

}

新增一個FragmentActivity

include fragment factory methodinclude interface callbacks勾選掉





















<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="com.example.andy6804tw.tabbed.HomeFragment">



    <!-- TODO: Update blank fragment layout -->

    <TextView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="HomeFragment"

        android:layout_gravity="center"

        android:textSize="30dp"

        android:textStyle="bold"/>



</FrameLayout>

重複這樣分別建立HomeFragment、FirstFragment、SecondFragment


●在MainActivity.java中

package com.example.andy6804tw.tabbed;



import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.Toolbar;



public class MainActivity extends AppCompatActivity {



    private  Toolbar toolbar;

    private TabLayout tabLayout;

    private ViewPager viewPager;

    private ViewPagerAdapter viewPagerAdapter;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        toolbar=(Toolbar)findViewById(R.id.app_bar);

        setSupportActionBar(toolbar);



        tabLayout=(TabLayout)findViewById(R.id.tabLayout);

        viewPager=(ViewPager)findViewById(R.id.viewPager);

        viewPagerAdapter=new ViewPagerAdapter(getSupportFragmentManager());

        viewPagerAdapter.addFragments(new HomeFragment(),"Home");

        viewPagerAdapter.addFragments(new FirstFragment(),"First");

        viewPagerAdapter.addFragments(new SecondFragment(),"Second");

        viewPager.setAdapter(viewPagerAdapter);

        tabLayout.setupWithViewPager(viewPager);



    }

}


執行結果



TabLayout頁面切換教學(Part1)


前言:TabLayout是在於App中頂部屬於AppBar的一環,此教學會使用 ViewPager,搭配一個元件叫做 TabLayout,來實作頁籤的點擊與左右滑動切換,其中每個頁籤都代表一個 Fragment下面是官方對於Fragment的說明網頁
https://developer.android.com/guide/components/fragments.html


由圖得知上面的標籤是由TabLayout來實作而下面的內容變換則是ViewPager以及Fragment實作的

加入design資源再Sync同步

1.我們從Toolbar開始,先在build.gradle的dependencies大括號裡面加入
   後面的24.2.1版本對應您的appcompat-v7才能正確的被執行哦!

compile 'com.android.support:design:24.2.1'

●styles.xml更改無ActionBar
























建立自定義Toolbar


新增一個XML檔

File name= app_bar
Root element=android.support.v7.Toolbar
<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:minHeight="?attr/actionBarSize"

    android:fitsSystemWindows="true"

    android:background="@color/colorPrimary"

    app:theme="@style/Base.ThemeOverlay.AppCompat.Dark"

    >



</android.support.v7.widget.Toolbar>



activity_main.xml


1.先建立android.support.design.widget.AppBarLayout 再把剛剛所建立的app_bar.xml <include>進去,再來再新增android.support.design.widget.TabLayout 也就是左右滑動的選單
最後再建立ViewPager
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.example.andy6804tw.tabbed.MainActivity">

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

        <include

            android:layout_height="wrap_content"

            android:layout_width="match_parent"

            layout="@layout/app_bar"

            android:id="@+id/app_bar"/>

        <android.support.design.widget.TabLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:id="@+id/tabLayout"

            app:tabGravity="fill"

            app:tabMode="fixed">

        </android.support.design.widget.TabLayout>



    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/viewPager">

    </android.support.v4.view.ViewPager>



</RelativeLayout>

2016年12月4日 星期日

Java Collection-List


上一篇已經先闡述Collection在Java中所扮演的角色,在這篇教學中會教各位如何使用java.util.List.*的物件。

         Collection的子介面List介面可算是應用程式中最常見的。List代表的就是所謂的清單列表,依序的放入以及取出是List最大的特點,也就是有順序性。List的實作類別有ArrayList、LinkList、Vector,這裡我們就來討論前兩個。

方法


回傳值
方法名稱
說明
boolean
add(int index,E e)
將物件加入集合中指定的位置
boolean
addAll(int index,
Collection<? Extends E>c)
將傳入的集合參數中的物件加入此集合中指定的位置
E
get(int index)
取得指定位置的物件
int
indexOf(Object o)
從最前面開始找出指定物件在集合中所引的位置
int
lasrIndexOf(Object o)
從最後面開始找出指定物件在集合中所引的位置
ListIterator<E>
listIterator()
傳回此集合元素的ListIterator
E
remove(int index)
移除指定位置的物件
List<E>
subList(int formIndex,int toIndex)
判斷某項目是否在 List<T> 中。

●ArraysList

ArrayList可以說是List最常被使用到的實作類別了,請下以下範例:
首先第一個部分是排序,是利用Collections.sort()類別方法。


●LinkList

使用LinkList來新增、修改、刪除元素效率優於ArrayList許多,因此常常被拿來實作堆疊Stack以及佇列Queue

以下用範例程式碼,說明如何利用 LinkedList 實作 Stack
Stack就是堆疊像堆盤子一樣是先進後出的概念(First In Last Out)

Resource:http://www.wikiwand.com/



以下用範例程式碼,說明如何利用 LinkedList 實作 Queue
Queue就是佇列就等於現實生活中排隊一樣,它是先進先出的概念(First In First Out)





0.


Java Collection-介紹


        在Java中可以幫我們處理一筆資料的除了陣列外,就非Collection API中的元件莫屬了。集合(Collection)就是設計來群組多個資料物件使用,存放在集合中的物件則可以稱為這個集合的元素(Elements)。

       在程式運作中,有時候會需要有地方可以暫時儲存產生出來的物件,我們稱之為 Container(容器)。然而在java.util.Collection介面中定義了所有集合最基本的存取方式如下圖:





















        Collection介面下又分別繼承了三個介面翻別是Set集合、List、Queue佇列也有提供API讓開發者直接使用它是利用LinkList來實作List介面的,當然你能有聽過Map它是以key-value存在並沒有在Collection介面下實作詳細內容接下來幾篇文章會陸續提到。

另外根據使用者的需求,在容器的選擇上也有所不同,下面有簡單的解釋:
  • List:循序索引的串列結構ex:ArrayList、LinkedList
  • Set:不允許相同物件存在的集合結構ex:HashSet、TreeSet
  • Map:使用 Key-Value(鍵-值) 方式儲存的結構ex:HashMap、TreeMap
上述所以到的容器後續文章中會一一的做說明解釋。

Navigation Drawer 側邊選單教學 (PartIV)


前提回顧:

Navigation Drawer 側邊選單教學 (PartIII)


這一篇教學要來做結尾了,此範例接著上一篇繼續做下去,會教您如何自定義Toolbar實作ActionBar取代內建的ActionBar


styles.xml更改成NoActionBar


<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">




















Layout右鍵新增navigation_actionbox.xml

File name=navigation_actionbox
Root element=android.support.v7.Toolbar

1.設立id:nav_action 高度wrap_content背景顏色@color/colorPrimary
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
   
android:orientation="vertical" android:layout_width="match_parent"
   
android:layout_height="wrap_content"
   
android:id="@+id/nav_action"
   
android:background="@color/colorPrimary"
   
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

2.此時activity_main.xmlActionbox會不見所以在LinearLayout中加入<include>把剛剛建立自定義的ActionBox加入activity_main.xml
<include layout="@layout/navigation_actionbox"
   
android:layout_width="match_parent"
   
android:layout_height="wrap_content"/>

另外LinearLayoutorientation改成vertical垂直




















3.在自定義的navigation_actionbox.xml更改主題配色
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark">




















●MainActivity.java撰寫程式

1.剛剛已經把Toolbar版面用出來了,接著在程式中建立Toolbar變數然後
setSupportActionBar( mToolbar )  Toolbar就能取代原本的ActionBar了

2.另外要讓清單選項觸發動作要實作implements NavigationView.OnNavigationItemSelectedListener 
並不是在onOptionsItemSelected()中去實作

MainActivity.java程式碼
package com.example.andy6804tw.navigationapp;


import
android.support.design.widget.NavigationView;
import
android.support.v4.widget.DrawerLayout;
import
android.support.v7.app.ActionBarDrawerToggle;
import
android.support.v7.app.AppCompatActivity;
import
android.os.Bundle;
import
android.support.v7.widget.Toolbar;
import
android.view.MenuItem;
import
android.widget.Toast;

public class
MainActivity  extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {

   
private DrawerLayout mDrawerLayout;
    private
ActionBarDrawerToggle mToggle;//元件觸發

   
private Toolbar mToolboar;

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

       
mToolboar=(Toolbar)findViewById(R.id.nav_action);
       
setSupportActionBar(mToolboar);//Toolbar取代原本的ActionBar

       
mDrawerLayout=(DrawerLayout)findViewById(R.id.drawerLayout);
       
mToggle=new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close);//必須用字串資源檔
       
mDrawerLayout.addDrawerListener(mToggle);//工具欄監聽事件

       
mToggle.syncState();
       
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//隱藏顯示箭頭返回

       
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
       
navigationView.setNavigationItemSelectedListener(this);//清單觸發監聽事件

   
}
   
@Override
   
public boolean onNavigationItemSelected(MenuItem item) {//實作清單觸發
       
int id = item.getItemId();

        if
(id == R.id.nav_account) {
            Toast.makeText(
this,"account",Toast.LENGTH_SHORT).show();

       
}
       
else if (id == R.id.nav_settings)
        {
            Toast.makeText(
this,"settings",Toast.LENGTH_SHORT).show();

       
}
       
else if (id == R.id.nav_logout)
        {
            Toast.makeText(
this,"logout",Toast.LENGTH_SHORT).show();

       
}
       
return true;
   
}

   
@Override
   
public boolean onOptionsItemSelected(MenuItem item) {

       
if(mToggle.onOptionsItemSelected(item)){//當按下左上三條線或顯示工具列
           
return true;
       
}
       
return super.onOptionsItemSelected(item);
   
}

}

執行結果