Android Studio Git簡單上傳到GitHub

上篇教學Android Studio初始化設定教到如何建置Git環境
本篇教學會教您如何把畚箕端的專案上Git並儲存到遠端資料庫GitHub當中

前置作業:
1.到GitHub申請一組個人帳號
2.切記要安裝Git套件(在上篇教學最後有提到)

首先:
在搜尋列開啟Git Bash若沒看到請安裝Git套件哦，並非系統內建cmd
開啟後把先前所建好的Android專案的資料夾打開找到路徑在Git Bash中輸入
cd *** (***為你的專案實際位置，這邊有個小技巧，您可以使用拖拉方式到Git Bash路徑就會自動跑出來囉)

第二步:

初始化Git專案指令=>git init

之後在Android Studio介面中就會自動偵測到你有VCS root

git status 可以查詢您目前的專案中Git狀態，像圖中尚未commit所以偵測到下列檔案未Git

第三步:

把資料上索引，這邊你把它想成我要提交一次Git要寫申請書告知有哪些檔案

git add . (注意後面有一點哦)

第四步:

提交commit此步驟還只是在您的本機中建立Git紀錄哦

git commit –m ‘第一次上傳’  (單引號內為備註使用者可自行說明此次上傳說明)

之後你會發現它會要求您輸入資訊，誰上傳誰留下痕跡當然要留下你的資訊才知道這份文件是誰修改的呀!

git config --global user.email "you@example.com"

git config --global user.name "Your Name"

最後在下一次Git commit –m ‘第一次上傳’就成功囉!

到上述步驟其實就已間簡單完成版本控制了，但還尚未結束先前不是有提到GitHub嗎?

這部份我們使用GitHub作為我們專案儲存的地方當然你也可以使用其他的例如BitBucket等...

GitHub是什麼?你可以簡單想成它是一個遠端的數據庫也就是一個讓你可以儲存Code的空間

有一種Google drive的概念，不過他的特點是你啥時修改上傳平台上一一的做紀錄，所以哪天某位合作夥伴不小心寫壞了專案第一時間可以知道是誰搞的鬼，另一方面也可以及時調回前一版本的檔案。

第五步:

首先到GitHub註冊帳號登入進去後新增第一個Repositories輸入你的專案名稱這裡寫GitTest

第六步:

Creat之後會給你一段Git程式碼把它複製貼放你的Git bash就可以把本地端的檔案上傳到據庫囉

git remote add origin https://github.com/andy6804tw/GitTest.git

git push -u origin master

最後上傳成功回到網頁上重新整理就會發先檔案已經全部上傳囉!

是不是很快速又方便，雖然網路上有許多Git的GUI圖形介面化的軟體，簡單按個幾下也可以
做出上步驟，所以下篇教學打算來完整說明Git的運作流程與圖形化界面的操作。

Android Studio初始化設定

哈囉大家好!
今天要來教各位基本的Android環境設定與如何建置版本控制環境
首先，到Android Studio的官網下載開發環境(容量蠻大的)
https://developer.android.com/studio/index.html

1.安裝好後就直接執行它吧!首次打開可以新建一個專案，在這部分鍵入專案名稱，company domain視情況命名，這跟之後上架App比較有關連，選好儲存路徑後就持續下一步開啟一個Empty的專案吧。

2.接下來我們來做簡單環境設定，個人喜歡黑色版面(顧眼睛)

    File->Settings->Appearance 選取主題Theme選取Darcula

3.有時候貼上程式碼或是自己寫Code時常常要引入函式庫，選取自動匯入系統就會偵測依照您目前狀態匯入適合的library

 File->Settings->Editor->General->Auto Import 選取All自動匯入lib

4.版本控制是製作專案的最重要部分，這這片文章中先教各位檢察環境

建議安裝Android Studio之前先到以下網站下載Git : https://git-scm.com/

之後再Android Studio中File->Settings->Version Control->Git 點選Test測試看看有沒有連動萬一沒有的話請選擇當初安裝Git的磁碟機底下的位置，基本上安裝預設都會在這C:\Program Files\Git\cmd\git.exe

下篇教學再教各位如何使用Git bash命令提示字元方式做版本控制，且上傳到遠端GitHub中 !

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 method和include 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>

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.xml的Actionbox會不見所以在LinearLayout中加入<include>把剛剛建立自定義的ActionBox加入activity_main.xml中

<include layout="@layout/navigation_actionbox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

另外LinearLayout的orientation改成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);
    }

}

執行結果