Xamarin-multiscreen-app

Xamarin-マルチスクリーンアプリ

この章では、ユーザーが登録できるようにするログインシステムを作成します。 次に、ログインに成功すると、登録ユーザーをアプリのホーム画面に移動します。

まず、新しいプロジェクトを作成し、 Login System と呼びます。 新しいプロジェクトで、 main.axml に移動し、以下に示すように2つのボタンと進行状況バーを追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   android:orientation = "vertical"
   android:layout_width = "fill_parent"
   android:layout_height = "fill_parent"
   android:background = "@android:color/background_light"
   android:weightSum = "100"
   android:minWidth = "25px"
   android:minHeight = "25px">
   <TextView
      android:text = "Login App"
      android:textAppearance = "?android:attr/textAppearanceMedium"
      android:layout_width = "match_parent"
      android:layout_weight = "20"
      android:layout_height = "0dp"
      android:textColor = "#368DEB"
      android:id = "@+id/txtCreatAccount"
      android:gravity = "center"
      android:textStyle = "bold"
      android:textSize = "25sp"/>
   <Button
      android:text = "Sign In"
      android:layout_width = "match_parent"
      android:layout_weight = "15"
      android:layout_height = "0dp"
      android:background = "@drawable/btnSignInStyle"
      android:id = "@+id/btnSignIn"
      android:layout_marginLeft = "20dp"
      android:layout_marginRight = "20dp"
      android:textSize = "15sp"/>
   <Button
      android:text = "Sign Up"
      android:layout_width = "match_parent"
      android:layout_weight = "15"
      android:layout_height = "0dp"
      android:background = "@drawable/btnSignUpStyle"
      android:id = "@+id/btnSignUp"
      android:layout_marginLeft = "20dp"
      android:layout_marginRight = "20dp"
      android:textSize = "15sp"/>
   <RelativeLayout
      android:layout_width = "match_parent"
      android:layout_height = "0dp"
      android:layout_weight = "50"
      android:minWidth = "25px"
      android:minHeight = "25px">
      <ProgressBar
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         android:id = "@+id/progressBar1"
         android:background = "@drawable/progressBarStyle"
         android:layout_centerInParent="true"
         android:indeterminate = "true"
         xmlns:tools = "
            http://schemas.android.com/tools"
         tools:visibility = "invisible"/>
   </RelativeLayout>
</LinearLayout>

ユーザーインターフェースを作成したら、ボタンをより魅力的に見せるようにスタイルを設定することが重要です。 これを行うには、 drawable folder の下に新しいXMLファイルを作成し、ファイルに btnSignInStyle.xml という名前を付けます。

XMLファイルでは、次のコード行を追加します-

<selector xmlns:android = "http://schemas.android.com/apk/res/android">
   <item android:state_pressed = "false">
      <layer-list>
         <item android:right = "5dp" android:top = "5dp">
            <shape>
               <corners android:radius = "2dp"/>
               <solid android:color = "#D6D6D6"/>
            </shape>
         </item>
         <item android:left = "2dp" android:bottom = "2dp">
            <shape>
               <corners android:radius = "4dp"/>
               <gradient android:angle = "270"
                  android:endColor = "#486EA9" android:startColor = "#486EA9"/>
               <stroke android:width = "1dp" android:color = "#BABABA"/>
               <padding android:bottom = "10dp"
                  android:right = "10dp" android:left = "10dp" android:top = "10dp"/>
            </shape>
         </item>
      </layer-list>
   </item>
   <item android:state_pressed = "true">
      <layer-list>
         <item android:right = "5dp" android:top = "5dp">
            <shape>
               <corners android:radius = "2dp"/>
               <solid android:color = "#D6D6D6"/>
            </shape>
         </item>
         <item android:left = "2dp" android:bottom = "2dp">
            <shape>
               <corners android:radius = "4dp"/>
               <gradient android:angle = "270"
                  android:endColor = "#79C791" android:startColor = "#486EA9"/>
               <stroke android:radius = "4dp" android:color = "#BABABA"/>
               <padding android:bottom = "10dp"
                  android:right = "10dp" android:left = "10dp" android:top = "10dp"/>
            </shape>
         </item>
      </layer-list>
  </item>
</selector>

上記のコードは、ロード時およびクリック時にボタンの色を設定し、ボタンの境界線の半径も設定します。

次に、 signup ボタンに対して上記と同様のスタイリングXMLを作成します。 これを行うには、 drawable フォルダーの下に別のXMLを作成し、 btnSignUpStyle.xml を呼び出します。 btnSignInStyle.xml からすべてを継承します。 唯一の違いは、ボタンのグラデーションの開始色と終了色です。

*btnSignUpStyle.xml* の *startColor* および *endColor* を変更します

<gradient android:angle="270"
   android:endColor="#008000" android:startColor="#008000"/>

*layout folder* に移動して、新しいAXMLファイルを作成し、registerDailog.axmlと呼びます。 このファイルには、アプリの新規ユーザーの登録詳細が含まれます。 このページには、3つの *EditTexts* とデータを送信するボタンが含まれます。 線形レイアウトコード内に次のコードを追加します。

<EditText
   android:layout_width = "match_parent"
   android:layout_marginBottom = "10dp"
   android:layout_marginTop = "25dp"
   android:layout_marginRight = "25dp"
   android:layout_marginLeft = "25dp"
   android:layout_height = "35dp"
   android:paddingLeft = "10dp"
   android:id = "@+id/txtUsername"
   android:hint = "Username"
   android:textColor = "#000"/>
<EditText
   android:layout_width = "match_parent"
   android:layout_height = "35dp"
   android:id = "@+id/txtEmail"
   android:layout_marginBottom = "10dp"
   android:layout_marginTop = "25dp"
   android:layout_marginRight = "25dp"
   android:layout_marginLeft = "25dp"
   android:paddingLeft = "10dp"
   android:textColor = "#000"
   android:hint = "Email"/>
<EditText
   android:layout_width = "match_parent"
   android:layout_height = "35dp"
   android:layout_marginBottom = "10dp"
   android:layout_marginTop = "25dp"
   android:layout_marginRight = "25dp"
   android:layout_marginLeft = "25dp"
   android:paddingLeft = "10dp"
   android:textColor = "#000"
   android:id = "@+id/txtPassword"
   android:hint = "Password"/>
<Button
   android:text = "Sign Up"
   android:layout_width = "match_parent"
   android:layout_height = "wrap_content"
   android:id = "@+id/btnSave"
   android:textSize = "20dp"
   android:textColor = "#fff"
   android:textStyle = "bold"
   android:height = "70dp"
   android:background = "@drawable/btnSignUpStyle"
   android:paddingLeft = "5dp"
   android:paddingRight = "5dp"
   android:paddingTop = "5dp"
   android:paddingBottom = "5dp"
   android:layout_marginLeft = "25dp"
   android:layout_marginRight = "25dp"
   android:layout_centerHorizontal = "true"/>

次に、 signUpDialog.cs という新しいクラスを追加します。 このクラスには、ダイアログボックスの作成に必要なコードが含まれます。 次の例はコードを示しています。

public class OnSignUpEvent:EventArgs {
   private string myUserName;
   private string myEmail;
   private string myPassword;
   public string UserName {
      get {
         return myUserName;
      }
      set{
         myUserName = value;
      }
   }

   public string Email {
      get {
         return myEmail;
      }
      set {
         myEmail = value;
      }
   }

   public string Password {
      get {
         return myPassword;
      }
      set {
         myPassword = value;
      }
   }
   public OnSignUpEvent(string username, string
      email, string password):base() {
      UserName = username;
      Email = email;
      Password = password;
   }

   class SignUpDialog:DialogFragment {
      private EditText txtUsername;
      private EditText txtEmail;
      private EditText txtPassword;
      private Button btnSaveSignUp;
      public event EventHandler<OnSignUpEvent> onSignUpComplete;
      public override View OnCreateView(LayoutInflater inflater,
         ViewGroup container, Bundle savedInstanceState) {
         base.OnCreateView(inflater, container, savedInstanceState);
         var view = inflater.Inflate(Resource.Layout.registerDialog, container, false);
         txtUsername = view.FindViewById<EditText>(Resource.Id.txtUsername);
         txtEmail = view.FindViewById<EditText>(Resource.Id.txtEmail);
         txtPassword = view.FindViewById<EditText>(Resource.Id.txtPassword);
         btnSaveSignUp = view.FindViewById<Button>(Resource.Id.btnSave);
         btnSaveSignUp.Click += btnSaveSignUp_Click;
         return view;
      }
      void btnSaveSignUp_Click(object sender, EventArgs e) {
         onSignUpComplete.Invoke(this, new OnSignUpEvent(txtUsername.Text,

            txtEmail.Text, txtPassword.Text));
         this.Dismiss();
      }
   }
}

上記のコードでは、 get および set プロパティを使用しました。 get メソッドは変数を返し、 set メソッドは返された変数に値を割り当てます。 ここに例があります-

public string Color {
   get {
      return color;
   }
   set {
      color = value;
   }
}

前の例では、ビューをオーバーライドするメソッドを作成しました。 メソッド内で、レイアウトフォルダに含まれる registerDialog.axml を参照する view という var を作成しました。

次に、 mainActivity.cs に移動して、ダイアログフラグメントを作成します。

private Button signUp;
private Button submitNewUser;
private EditText txtUsername;
private EditText txtEmail;
private EditText txtPassword;

protected override void OnCreate(Bundle bundle) {
   base.OnCreate(bundle);
   SetContentView(Resource.Layout.Main);
   signUp = FindViewById<Button>(Resource.Id.btnSignUp);
   submitNewUser = FindViewById<Button>(Resource.Id.btnSave);
   txtUsername = FindViewById<EditText>(Resource.Id.txtUsername);
   txtEmail = FindViewById<EditText>(Resource.Id.txtEmail);
   txtPassword = FindViewById<EditText>(Resource.Id.txtPassword);

   signUp.Click += (object sender, EventArgs args) => {
      FragmentTransaction transFrag = FragmentManager.BeginTransaction();
      SignUpDialog diagSignUp = new SignUpDialog();
      diagSignUp.Show(transFrag, "Fragment Dialog");
      diagSignUp.onSignUpComplete += diagSignUp_onSignUpComplete;
   };
}
void diagSignUp_onSignUpComplete(object sender, OnSignUpEvent e) {
   StartActivity(typeof(Activity2));
}

上記のコードには、クリックするとsignUpダイアログをロードするボタンクリックイベントが含まれています。 ボタンクリック内で、 registerDialog.axml ファイルをロードする SignUpDialog クラスを作成しました。

次に、 FragmentTransaction transFrag = FragmentManager.BeginTransaction（）; を使用して、 registerDialog ページをAndroid Dialog Fragmentとして表示しました。

*home.axml* という別の *.axml* ファイルを追加します。 ユーザーがシステムに正常にログインすると、このレイアウトがランディング画面になります。 このレイアウト内に、次のコードに示すようにテキストビューを追加します。

<TextView
   android:text = "You have been succesfully registered. Welcome!"
   android:textAppearance = "?android:attr/textAppearanceLarge"
   android:layout_width = "match_parent"
   android:layout_height = "wrap_content"
   android:id = "@+id/textView1"/>

次に、 Activity2.cs という最終アクティビティを作成します。 このアクティビティでは、 findViewById を使用して home.axml を検索します。

最後に、アプリをビルドして実行します。 出力として次の画面が表示されます。

アプリのビルド