Android原件(merge、Intent)的應用─問卷小專題
前言
今日來設計一款能換頁的表單,就像問卷調查這樣。
由於這次的呈現方式像是個小專題,文章的長度會顯得比較龐大。(其實也沒多大啦XDD)
建議先下載github內的檔案來看,會比較不會那麼暈!
今日實作影片:
正文
三個地方需要實作:
一、Layout
二、Java
三、Strings.xml
一切都從Layout開始,有了畫面才會有驅動畫面的動力阿!
1、實作
Activity1、Activity2、Activity3是用來裝載題目的。
而question_answer.xml 是一個merge,不用設計她的Java可以單純創一個xml即可。
Layout佈局
MainActivity佈局
<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout
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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
tools:context="com.example.nikeru8.questionionnaire.MainActivity">
<Button
android:onClick="next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="問券開始囉!"/>
</RelativeLayout>
Activity1~3佈局 (Activity1、Activity2、Activity3的布局都一模一樣)
<?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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<include android:id="@+id/question_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/question_answer"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<Button
android:id="@+id/btn_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="back"
android:text="BACK" />
android:id="@+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:onClick="next"
android:text="NEXT"
/>
</LinearLayout>
</LinearLayout>
佈局解釋:
Activity1、Activity2、Activity3的布局都一模一樣就不再多貼了。
而上述的布局中include的用法是用來實現merge 的,再incude內使用以下兩種方法呼叫merge頁面!
android:id="@+id/question_answer"
layout="@layout/question_answer"
question_answer.xml佈局
<?xml version="1.0"
encoding="utf-8"?>
<merge 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="horizontal">
<TextView
android:id="@+id/tv_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="No."
android:textSize="96sp" />
<TextView
android:id="@+id/tv_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:textAppearance="@android:style/TextAppearance.Large"
tools:text="這裏是題目?" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/radio_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@android:style/TextAppearance.Medium"
android:onClick="click"
android:tag="A"
tools:text="A 答案" />
<RadioButton
android:id="@+id/radio_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@android:style/TextAppearance.Medium"
android:onClick="click"
android:tag="B"
tools:text="B 答案" />
<RadioButton
android:id="@+id/radio_c"
android:layout_height="wrap_content"
android:textAppearance="@android:style/TextAppearance.Medium"
android:onClick="click"
android:tag="C"
tools:text="C 答案" />
</RadioGroup>
</merge>
佈局解釋:
這裡的佈局畫面看起來很凌亂,不過不打緊,把merge頁面指定到activity內就不會有這個情況了。
指定到activity1~3內,因為是Layout佈局,
android:orientation="vertical"
有上面這行再催使question_answer.xml內的佈局排排站好!
使用<merge>可讓Activiy1~3內省去一層LinearLayout,直接用merge併入,節省系統資源提高直行效率!
再開始Java前,還有一個步驟要完成!
請妳把畫面移至values/strings.xml
Java內的文字要從strings.xml內取得。
Qnestion:為什麼要這麼麻煩呢?
Ans:這是為了解除耦合方便以後程式的維護!
試想如果以後問卷的問題要做改變的畫,可以直接從strings.xml內作變更,不用再從Activity內一個一個翻找作變更!
strings.xml
<resources>
<string name="app_name">Questionionaire</string>
//第一題
<string name="question_1">請問 \u00A0\u00A0\u00A0 \"1\" + 1 \u00A0\u00A0\u00A0 的結果是?</string>
<string name="question_1_radio_a">\u00A0\u00A0編譯失敗</string>
<string name="question_1_radio_b">\u00A0\u00A02</string>
<string name="question_1_radio_c">\u00A0\u00A011</string>
//第二題
<string name="question_2">
<![CDATA[
請問
<br><br>
\u00A0\u00A0\u00A0\u00A0<b><font color="blue"><merge></font></b>
<br><br>
在 android layout 的用途?
]]>
</string>
<string name="question_2_radio_a">根本就沒有這個功能</string>
<string name="question_2_radio_b">
<![CDATA[
將一個 layout 併入另一個 layout,<br>
可節省一層 <b>ViewGroup</b>
]]>
</string>
<string name="question_2_radio_c">版本控制系統用來合併不同的分支</string>
//第三題
<string name="question_3">
<![CDATA[
請問<br>切換 Activity 要呼叫哪個方法?
]]>
</string>
<string name="question_3_radio_a">startActivit()</string>
<string name="question_3_radio_b">startActivityForResult()</string>
<string name="question_3_radio_c">以上皆是</string>
</resources>
Java佈局
MainActivity佈局
package com.example.nikeru8.questionionnaire;
import android.content.Intent;
import
android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends
AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
// 按下 NEXT (切下一個畫面 Activit1)
public void next(View view) {
//Intent(現在這個位置 , 選擇下一頁的位置);
Intent intent = new Intent(this, Activity1.class);
startActivity(intent);
}
}
佈局解釋:
這頁就一個簡單的Intent應用,我並沒有寫在Intent大全內,就在此做個介紹吧,這是Intent最簡單、最實用也最重要的方法,沒有之一!
Intent
intent = new Intent(this, Activity1.class);
startActivity(intent);
Activity1布局
package com.example.nikeru8.questionionnaire;
import android.content.Intent;
import android.os.Bundle;
import
android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.View;
import android.widget.RadioButton;
import android.widget.TextView;
public class Activity1 extends
AppCompatActivity {
public static final String Q1_ANSWER_KEY = "Q1";
//設定參數
private TextView m_tv_no;
private TextView m_tv_question;
private RadioButton m_radio_a;
private RadioButton m_radio_b;
private RadioButton m_radio_c;
private CharSequence m_answer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_1);
init();
}
//起始畫面,設定起始畫面的按鈕
private void init() {
m_tv_no = (TextView)findViewById(R.id.tv_no);
m_tv_question = (TextView)findViewById(R.id.tv_question);
m_radio_a = (RadioButton)findViewById(R.id.radio_a);
m_radio_b = (RadioButton)findViewById(R.id.radio_b);
m_radio_c = (RadioButton)findViewById(R.id.radio_c);
//題號
m_tv_no.setText("1");
//第一題的問題
m_tv_question.setText(Html.fromHtml(getString(R.string.question_1)));
//radio第一個選擇
m_radio_a.setText(Html.fromHtml(getString(R.string.question_1_radio_a)));
//radio第二個選擇
m_radio_b.setText(Html.fromHtml(getString(R.string.question_1_radio_b)));
//radio第三個選擇
m_radio_c.setText(Html.fromHtml(getString(R.string.question_1_radio_c)));
}
//返回上一頁
public void back(View view) {
finish();
}
// 按下 NEXT
public void next(View view) {
// 建立新 Intent: new Intent( 來源 , 目的);
Intent intent = new Intent(this, Activity2.class);
startActivity(intent);
}
}
Activity2佈局
import android.os.Bundle;
import
android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.View;
import android.widget.RadioButton;
import android.widget.TextView;
public class Activity2 extends
AppCompatActivity {
public static final String Q2_ANSWER_KEY = "Q2";
private TextView m_tv_no;
private TextView m_tv_question;
private RadioButton m_radio_a;
private RadioButton m_radio_b;
private RadioButton m_radio_c;
private CharSequence m_answer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_2);
init();
}
private void init() {
m_tv_no = (TextView)findViewById(R.id.tv_no);
m_tv_question = (TextView)findViewById(R.id.tv_question);
m_radio_a = (RadioButton)findViewById(R.id.radio_a);
m_radio_b = (RadioButton)findViewById(R.id.radio_b);
m_radio_c = (RadioButton)findViewById(R.id.radio_c);
m_tv_no.setText("2");
m_tv_question.setText(Html.fromHtml(getString(R.string.question_2)));
m_radio_a.setText(Html.fromHtml(getString(R.string.question_2_radio_a)));
m_radio_b.setText(Html.fromHtml(getString(R.string.question_2_radio_b)));
m_radio_c.setText(Html.fromHtml(getString(R.string.question_2_radio_c)));
}
// 按下 BACK
public void back(View view) {
finish();
}
// 按下 NEXT
public void next(View view) {
// 建立新 Intent: new Intent( 來源 , 目的)
Intent intent = new Intent(this, Activity3.class);
startActivity(intent);
}
}
Activity3佈局
public static final String Q3_ANSWER_KEY = "Q3";
private TextView m_tv_no;
private TextView m_tv_question;
private RadioButton m_radio_a;
private RadioButton m_radio_b;
private RadioButton m_radio_c;
private CharSequence m_answer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_3);
init();
}
private void init() {
m_tv_no = (TextView)findViewById(R.id.tv_no);
m_tv_question = (TextView)findViewById(R.id.tv_question);
m_radio_a = (RadioButton)findViewById(R.id.radio_a);
m_radio_b = (RadioButton)findViewById(R.id.radio_b);
m_radio_c = (RadioButton)findViewById(R.id.radio_c);
m_tv_no.setText("3");
m_tv_question.setText(Html.fromHtml(getString(R.string.question_3)));
m_radio_a.setText(Html.fromHtml(getString(R.string.question_3_radio_a)));
m_radio_b.setText(Html.fromHtml(getString(R.string.question_3_radio_b)));
m_radio_c.setText(Html.fromHtml(getString(R.string.question_3_radio_c)));
}
// 按下 MAIN
public void main(View view) {
Intent intent=new
Intent(this,MainActivity.class);
startActivity(intent);
}
// 按下 BACK
public void back(View view) {
finish();
}
}
佈局解釋:
Activity1、Activity2、Activity3的Java程式碼基本上一樣,改動理面的數字即可!
講解一下I
今天就到這了。實作完成!
2、注意的事情
做到現在RadioButton還沒有實作,所以按下會崩潰!
下一章節將會實作RadioButton和這小專題和adapter作個連結。
Github連結:
Intent
Intent大全(二)- googlemap應用、網頁連結、地圖作標、路徑規劃、簡訊http://nikeru8.blogspot.tw/2016/06/intentgooglemap_21.html
很有心餒,內容很受用~3~
回覆刪除想另外請教一下,Html.fromHtml這麼寫的目的是甚麼呢?我拿掉之後好像也還可以跑(?
刪除
刪除是讓TextView解析和顯示Html代碼。
去掉不會出錯,但RadioButton內的文字應該會變調。
你这样写的话,如果问题很多activity也会有很多个啊,能复用么
回覆刪除當然可以復用,這裡的寫法是以好維護為主,說不定以後問券的選項變成三個、四個混雜期間,就必須這樣寫(還必須多寫幾個不同選項的merge出來做配合)。
刪除如果上頭可以做到『固定只有一個問題、固定只有三個選項』的話,復用同一個activity是最好的選則。