●實作練習：預期畫面
(一)720dp以下畫面
(二)720dp以上畫面
●程式說明：
(一)使用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)：籃球記分板
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
繪圖軟體練習 (2)
