說明
- 源代碼
- 為了更全面的了解RN,先熟悉一下Android開發
第1章 Android 初體驗
1.1 Android開發概述
- Android是Google開發的操作系統
- Android開發是移動應用開發的表現形式之一(Android、IOS、H5 App、Native + H5、 RN、ionic、MUI…)
1.2 Android開發工具
- Android Studio
- 為什么使用Android Studio?
- Android Studio是Google自己推出的Android集成開發工具,且Google已經停止對Eclipse的支持.
1.3 第一個Android應用
- Everything begin with Hello World!
- Android Studio最大的特定是使用Gradle來構建項目…
[部分目錄說明]
res: 存放資源drawable: 圖片layout: 布局文件mipmap-hdpi: logo圖片values: 顏色、文字AndroidMainfest.xml: 應用里面用到的所有內容,都需要在這個里面注冊一下
[部分代碼說明]
src/main/java/com.skypan.helloworld/MainActivity內的函數setContentView(R.layout.activity_main):表示,使用了activity_main布局- 打開
activity_main.xml,將標簽名改為如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" />
</LinearLayout>
TextView android:text="Hello World": 顯示在手機上的值為Hello World
第2章 UI組件
2.1 布局管理器
- 線性布局(LinearLayout)
- 相對布局(RelativeLayout)
- 以上兩種占了接近百分之99
LinearLayout(線性布局)
[最常用屬性]:
android:id: 控件的idandroid:layout_width: 布局的寬度android:layout_height: 布局的高度android:background: 布局的背景顏色android:layout_margin: 布局的左右邊距android:layout_padding: 布局的內側邊距android:orientation: 布局的方向dp: 根據屏幕自己算出大小match_parent: 匹配父元素<View />: 是所有控件的父類,如<Button />android: gravity= "bottom": 控件子元素的排列方式weight: 權重,占父元素寬度(剩余)的權重.相當于flex布局中子元素的屬性flex:1; 把剩余內容按照權重去分配
[小結]:
- 通過Android Studio新建的項目,入口文件是
/app/src/main/java/com.skypan.helloworld/MainActivity
class MainActivity : AppCompatActivity() {override fun onCreate (saveInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)}
}
- 其中
setContentView使用到了activity_main:總體的布局樣式
2.1.2 RelativeLayout(相對布局)
[最常見屬性]:
android:layout_toLeftOf: 在誰左邊android:layout_toRightOf: 在誰右邊android:layout_alignBottom: 跟誰底部對齊android:layout_alignParentBottom: 跟父元素底部對齊android:layout_below: 在誰的下面
[栗子]:
- 靠父元素右下角對齊
<RelativeLayout><Viewandroid:id="@+id/view_1"android:layout_width="100dp"android:layout_height="100dp"android:background="#000000"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"/>
</RelativeLayout>
- View2相對于View1的右邊對齊
<RelativeLayout><Viewandroid:id="@+id/view_1"android:layout_width="100dp"android:layout_height="100dp"android:background="#000000"/><Viewandroid:id="@+id/view_2"android:layout_width="100dp"android:layout_height="100dp"android:background="#FF0033"android:layout_toRightOf="@id/view_1"/>
</RelativeLayout>
2.2 TextView
- 文字大小、顏色
- 顯示不下使用…
- 文字 + icon
- 中劃線、下劃線
[栗子]:
- 1.寫一個寬度隨父元素,高度等于文本高度的按鈕控件
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><Buttonandroid:id="@+id/btn_textview"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="TextView"/>
</LinearLayout>
- 2.點擊Button類實現跳轉
// MainActivity.java
import andoridx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;public class MainActivity extends AppCompatActivity {// 聲明 buttonprivate Button mBtnTextView;@overridepretected void onCreate(Bundle saveInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mBtnTextView = (Button) findViewById(R.id.btn_textview);mBtnTextView.setOutClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 跳轉到TextView演示界面Intent intent = new Intent(packageContext: MainActivity.this, TextViewActivity.class);startActivity(intent);}})}
}
- 3.能在MainActivity中使用TextViewActivity的原因
AndroidMainfest.xml配置如下:
<applicationandroid:allowBckup="true"...<activity android:name=".MainActivity"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity>
>
- 4.Java操作的TextView:
android:id="@+id/tv_4"
// TextViewActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.widget.TextView;
import android.os.Bundle;
public class TextViewActivity extends AppCompatActivity {private TextView mTv4;@overrideprotected void onCreate (Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_text_view);// 獲取 id.tv_4mTv4 = (TextView) findViewById(R.id.tv_4);// 給 id.tv_4劃線mTv4.getPaint().setFlags(Paint.STRING_THRU_TEXT_FLAG);// 去鋸齒mTv4.getPaint().setAntiAlias(true)}
}
2.3 Button
- 文字大小、顏色
- 自定義背景形狀
- 自定義按壓效果
- 點擊事件
Button樣式(簡單)
- activity_main.xml
<Buttonandroid:id="@+id/btn_button"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button"android:layout_marginTop="10dp" />
使用java操作控件
// MainActivity.java// 聲明控件
private Button mBtnButton
// 找到按鈕 btn_button
mBtnButton = (Button) findViewById(R.id.btn_button);
// 給 mBtnButton 添加點擊事件
mBtnButton.setOnClickListener(new View.OnClickListener(){// 點擊按鈕后執行的操作
})
實現跳轉
import andoirdx.appcompat.app.AppCompatActivity;
import andoird.widget.Button;
import android.content.Intent;public class MainActivity extends AppCompatActivity {// 聲明buttonprivate Button mBtnButton;@overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 找到按鈕mBtnButton = (Button) findViewById(R.id.btn_button);mBtnButton.setOnClickListener(new View.OnClickListener() {@ovrridepublic void onClick(View v) {// 跳轉到 Button 演示界面Intent intent = new Intent( packageContext: MainActivity.this, ButtonActivity.class);startActivity(intent);}})}
}
做一個矩形的按鈕
- 1.在res/drawable -> New -> Drawable resource file -> btn_2.xml
- 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><solidandroid:color="#ffffff" /><cornersandroid:radius="15dp" />
按壓效果
- res/drawable/bg_btn4.xml
- 樣式
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true"><shape><solid android:color="#cc7c00" /><corners android:radius="15dp" /></shape></item><item android:state_pressed="false"><shape><solid android:color="#ff9900"><corners android:radius="15dp" /></shape></item>
</selector>
- 引用如下
activity_button.xml
<Buttonandroid:id="@+id/btn_4"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@id/btn_3"android:layout_marginTop="5dp"android:text="Button 4"android:textSize="20sp"android:textColor="#0066ff"android:background="@drawable/bg_btn4" />
點擊按鈕,響應Toast
- 假設有按鈕如下:
activity_button.xml
<Button...android:onClick="showToast" />
- 對應Java文件
ButtonActivity.java中加入如下:
public void showToast(View view) {Toast.makeText(context: this, text:'點擊', Toast.LENGTH_SHORT).show();
}
[報錯]:
Could not find method showToast(View) in a parent or ancestor Context for android: 寫按鈕觸發事件的時候,沒有傳入參數View view,將public void showToast()改為public void showToast(View view)
點擊按鈕,響應Toast[方法2]
- [核心方法] :
Button.setOnClickListener() - 假設有按鈕如下:
activity_button.xml
<Buttonandroid:id="@+id/btn_3"....
/>
- 對于的Java文件
ButtonActivity.java中加入如下:
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import android.view.View;public class ButtonActivity extends AppCompatActivity {private Button mBtn3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mBtn3 = (Button) findViewById(R.id.btn_3);mBtn3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(ButtonActivity.this, 'btn3被點擊', Toast.LENGTH_SHORT).show();}})}
}
給TextView控件添加點擊事件
- TextView控件
activity_button.xml,如下:
<TextViewandroid:id="@+id/tv_1"...
/>
- 在Java中獲取控件,并設置點擊事件
ButtonActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;
import android.view.View;public class ButtonActivity extends AppCompatActivity {private TextView mTv1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// tv_1的點擊事件mTv1 = (TextView) findViewById(R.id.tv_1);mTv1.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View v) {Toast.makeText(ButtonActivity.this, "TextView被點擊", Toast.LENGTH_SHORT).show();}})}
}
2.4 EditText(輸入控件)
- 常用屬性
- 監聽事件
- 制作登錄界面
2.4.1 加一個跳轉頁面的按鈕
- 按鈕樣式:
activity_main.xml
<Buttonandroid:id="@+id/btn_edittext"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="EditText"android:textAllCaps="false"/>
- 按鈕的點擊事件:
MainActivity.java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.context.Intent;
import android.widget.Button;
import android.view.View;public class MainActivity extends AppCompatActivity {// 聲明buttonprivate Button mBtnEditText;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 找到 btn_edittextmBtnEditText = (Button) findViewById(R.id.btn_edittext);mBtnEditText.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// 跳轉到 EditText 界面// 這里先假設有 EditTextActivityIntent intent = new Intent(MainActivity.this, EditTextActivity.class);startActivity(intent);}});}
}
- 按鈕的活動頁面:
activity_edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android/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"android:padding="15dp"><EditTextandroid:id="@+id/et_1"android:layout_width="match_parent"android:layout_height="50dp"android:textSize="16sp"android:textColor="#ffad33"android:hint="用戶名"/><EditTextandroid:id="@+id/et_2"android:layout_width="match_parent"android:layout_height="50dp"android:layout_below="@id/et_1"android:hint="密碼"android:inputType="textPassword"android:layout_marginTop="5dp"/>
</RelativeLayout>
- 給用戶名輸入框
activity_edit_text.xml加樣式 - 輸入控件如下
<EditTextandroid:id="@+id/et_1"...android:background="@drawable/bg_username"
/>
- 在res/drawable -> New -> Drawable resource file -> bg_username.xml(shape)
- 寫入形狀如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><strokeandroid:width="1dp"andorid:color="#999999" /><cornersandroid:radius="5dp"/>
![Android Studio --- [學習筆記]RadioButton、CheckBox、ImageView、ListView、TCP的三次握手](http://pic.xiahunao.cn/Android Studio --- [學習筆記]RadioButton、CheckBox、ImageView、ListView、TCP的三次握手)
![Android Studio --- [學習筆記]TCP(第2彈)、GridView、ScrollView](http://pic.xiahunao.cn/Android Studio --- [學習筆記]TCP(第2彈)、GridView、ScrollView)
![bzoj 1232: [Usaco2008Nov]安慰奶牛cheer【最小生成樹】](http://pic.xiahunao.cn/bzoj 1232: [Usaco2008Nov]安慰奶牛cheer【最小生成樹】)
![JavaScript --- [學習筆記]觀察者模式 理解對象 工廠模式 構造函數模式](http://pic.xiahunao.cn/JavaScript --- [學習筆記]觀察者模式 理解對象 工廠模式 構造函數模式)
 表達式的！(綁定表達式)與 #(非綁定表達式))
![JavaScript --- [學習筆記] 原型模式](http://pic.xiahunao.cn/JavaScript --- [學習筆記] 原型模式)
