Android--勞動部實體課程筆記分享(十六)fragment與h720dp以上layout實作練習--兩隊籃球計分板(顯示球隊logo)－簡單。生活。享受

●實作練習：預期畫面

(一)720dp以下畫面

fragment

(二)720dp以上畫面

fragment

●程式說明：

(一)使用fragment

1.fragment(片段)：可以由很多veiw組成，做成一個片段以後就可以重複使用，不需要一直複製貼上相同的程式碼

2.在專案=>右鍵=>new=>Fragment=>fragment(blank)

=>先命名，勾選產生xml，這樣會自動產生一個layout，可以做版面調整

=>下面兩個選項是自動產生一些程式碼不需要勾選

3.在mainactivity.xml中加入fragment，其中android:name為fragment的類別屬性名稱，tools:layout為xml的layout名稱

<fragment

android:name="com.example.student.lab03.CountFragment"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

tools:layout="@layout/fragment_count"/>

(二)補充說明

1.xmlns=>ns:name space(命名空間)，因為命名空間必須獨一無二，所以xmlns=一個獨立網址來命名

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

2.andorid:layout_width=>左邊的android:其實就等於 http://schemas.android.com/apk/res/android，是為了區分出這個xml屬性是android用的而非一般的xml

3.android:屬性在執行時會有效(發生在裝置上)

tools:屬性在設計階段預覽有效(程式在執行時，tools的屬性是不存在的)

4.在fragment的程式中，onCreateView會回傳一個view，這邊透過inflater，把fragment回傳給activity

=>因為findveiwbyid一般可以直接在activity中做是因為從AppCompatActivity中繼承了這個方法

=>但是我們現在是要在fragment中找id，並沒有繼承這個方法

=>另外，如果要findviewbyid，要寫在哪?

=>如果寫在onCreaterView中，不能寫在return後面，因為return後就結束程式了，所以 onCreaterView完成，在下面寫一個新的onStart()，而且不能直接findView，要先getView()，這個方法是從fragment繼承下來的

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

return inflater.inflate(R.layout.fragment_count, container, false);

}

public void onStart(){

super.onStart();

teamName=(TextView)getView().findViewById(R.id.teamName);

score=(TextView)getView().findViewById(R.id.score);

}

(三)片段的生命週期

=>有些方法沒使用到，但仍會從父類別繼承

=>onCreateView()是用來建立新的view

1.因為規定fragment.xml中的onClick屬性所設定的method一定要寫在mainactivity.java中，所以三個計分button的onclick都要在 mainactivity.java中建立method=>可以點小燈泡=>產生onClick event handler

=>選擇產生的java

=>在mainactivity產生三個method

2.先找到fragment，再找到fragment中的 view

=>利用 getSupportFragmentManager()得到一個fragmentmanager(後面代表會回傳的內容)

=>再利用manager和fragment id來找到view

=>找到後會回傳一個fragment

=>要轉型成我們自己的CountFragment

public void add3p(View view) {

CountFragment teamA= (CountFragment)getSupportFragmentManager().findFragmentById(R.id.teamA);

teamA.score.setText("3");

}

(四)自訂按鈕風格

1.在values/styles.xml中修改，方法如下：

<style name="ButtonStyle">

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:layout_marginBottom">8dp</item>

<item name="android:layout_marginTop">8dp</item>

<item name="android:textSize">@dimen/fontSize</item>

<item name="android:textColor">@android:color/white</item>

<item name="android:background">@color/colorPrimary</item>

</style>

2.再去fragment.xml中指定要用的style

<Button

android:id="@+id/add3p"

android:text="+3 分球"

style="@style/ButtonStyle"

●實作練習：xml

(一)activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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="com.example.student.lab0302.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <fragment
            android:id="@+id/teamA"
            android:name="com.example.student.lab0302.CountFragment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:layout="@layout/fragment_count" />

        <!--中間的分隔線是一個view物件，寬度為1dp-->
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:background="@android:color/darker_gray" />

        <fragment
            android:id="@+id/teamB"
            android:name="com.example.student.lab0302.CountFragment"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:layout="@layout/fragment_count" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="@color/colorPrimary"
            android:onClick="clear"
            android:text="重置"
            android:textColor="@android:color/white"
            android:textSize="@dimen/fontSize" />
    </LinearLayout>

</RelativeLayout>

(二)fragment_count.xml

<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.student.lab0302.CountFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            android:id="@+id/teamName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:gravity="center"
            android:text="隊名"
            android:textSize="@dimen/fontSize" />

        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="0"
            android:textSize="60dp" />

        <!--刪除onclikc的設定全部委外-->
        <Button
            android:id="@+id/add3p"
            style="@style/ButtonStyle"
            android:text="+3 分球"
            android:textSize="@dimen/fontSize" />

        <Button
            android:id="@+id/add2p"
            style="@style/ButtonStyle"
            android:text="+2 分球" />

        <Button
            android:id="@+id/add1p"
            style="@style/ButtonStyle"
            android:text="罰球" />
    </LinearLayout>

</FrameLayout>

(三)h720dp-port/fragment_count.xml

<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.student.lab0302.CountFragment">
    
    <!--因為高度720所以高度夠高，可以放圖片，如果在一般手機高度不夠高，就不顯示圖片-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <ImageView
            android:id="@+id/teamLogo"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_gravity="center"
            android:layout_marginBottom="16dp"
            android:src="@drawable/hornets" />

        <TextView
            android:id="@+id/teamName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:gravity="center"
            android:text="隊名"
            android:textSize="@dimen/fontSize" />

        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="0"
            android:textSize="60sp" />
        <!--刪除onclikc的設定全部委外-->
        <Button
            android:id="@+id/add3p"
            style="@style/ButtonStyle"
            android:text="+3 分球" />

        <Button
            android:id="@+id/add2p"
            style="@style/ButtonStyle"
            android:text="+2 分球" />

        <Button
            android:id="@+id/add1p"
            style="@style/ButtonStyle"
            android:text="罰球" />
    </LinearLayout>

</FrameLayout>

●實作練習：Java Code

(一)MainActivity.java

public class MainActivity extends AppCompatActivity {
    CountFragment teamA;
    CountFragment teamB;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        teamA= (CountFragment)getSupportFragmentManager()
               .findFragmentById(R.id.teamA);
        teamB= (CountFragment)getSupportFragmentManager()
              .findFragmentById(R.id.teamB);
    }


    @Override
    //右鍵=>generate=>override method=>onStart()
    protected void onStart() {
        super.onStart();
        //不能放在onCreate中，因為mainactivity在oncreate的時候fragment的view還沒產生
        //onCreate是在做設定開啟的畫面
        teamA.setName("黃蜂");
       teamB.setName("火箭");
       teamA.setTeamLogo(R.drawable.hornets);
       teamB.setTeamLogo(R.drawable.rockets);
    }

    public void clear(View v) {
        teamA.reset();
        teamB.reset();
    }
}

(二)CountFragment.java

//繼承View.OnClickListener介面，讓button按下時可以執行所有onclick方法
//由fragment去override這個onclick方法
public class CountFragment extends Fragment 
    implements View.OnClickListener {
    private TextView teamName;
    private TextView score;
    //因為現在button要在fragment中直接使用，所以要先宣告
    private Button add3p, add2p, add1p;
    private ImageView teamLogo;

    public CountFragment() { //fragment無參數建構子
        // 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_count, container, false);

    }

    public void onStart() {
        super.onStart();
        teamName = (TextView) getView().findViewById(R.id.teamName);
        teamLogo = (ImageView) getView().findViewById(R.id.teamLogo);
        score = (TextView) getView().findViewById(R.id.score);
        add3p = (Button) getView().findViewById(R.id.add3p);
        add2p = (Button) getView().findViewById(R.id.add2p);
        add1p = (Button) getView().findViewById(R.id.add1p);

        //要設定onClickListener監聽，監聽的對象是就是自己(this)
        add3p.setOnClickListener(this);
        add2p.setOnClickListener(this);
        add1p.setOnClickListener(this);
    }

    public void reset() {
        score.setText("0");
    }

    //因為CharSequence是個interface，
    //有很多class有implement它：String /StringBuilder/...
    public void setName(CharSequence name) {
        teamName.setText(name);
    }

    public void setTeamLogo(int id) {
        //因為小螢幕中不會有teamLogo，
        //所以小螢幕再找teamlogo id時會找不到而傳一個空值給teamlogo
        if (teamLogo != null) {
            //Sets a drawable as the content of this ImageView.
            teamLogo.setImageResource(id);
        }
    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        int scoreCount = Integer.parseInt(score.getText().toString());
        switch (id) {
            //因為add3p是button類別，
             //但id是int，不能直接寫，所以要寫完整的R.id.add3p
            case R.id.add3p:
                score.setText(String.valueOf(scoreCount + 3));
                break;
            case R.id.add2p:
                score.setText(String.valueOf(scoreCount + 2));
                break;
            case R.id.add1p:
                score.setText(String.valueOf(scoreCount + 1));
                break;

        }
    }
}

*程式參考(gitHub)：籃球記分板

muchone

簡單。生活。享受

muchone 發表在痞客邦留言(0) 人氣()

E-mail轉寄

簡單。生活。享受

想要一種簡單又享受的生活

Android--勞動部實體課程筆記分享(十六)fragment與h720dp以上layout實作練習--兩隊籃球計分板(顯示球隊logo)

歷史上的今天

留言列表

熱門文章

文章分類

繪圖軟體練習 (2)

程式設計學習筆記 (5)

kids程式學習分享 (1)

網站管理 (1)

英文練習 (1)

DIY (3)

好書分享 (1)

開箱文 (3)

食記 (3)

遊記 (2)

生活雜記 (1)

最新文章

文章搜尋

文章精選

最新留言

參觀人氣

QR Code

簡單。生活。享受

想要一種簡單又享受的生活

Android--勞動部實體課程筆記分享(十六)fragment與h720dp以上layout實作練習--兩隊籃球計分板(顯示球隊logo)

歷史上的今天

留言列表

廣告

熱門文章

文章分類

繪圖軟體練習 (2)

程式設計學習筆記 (5)

kids程式學習分享 (1)

網站管理 (1)

英文練習 (1)

DIY (3)

好書分享 (1)

開箱文 (3)

食記 (3)

遊記 (2)

生活雜記 (1)

最新文章

文章搜尋

文章精選

最新留言

參觀人氣

QR Code