アンドロイドアプリを作成する際に、アプリや会社、ソーシャルメディアへのリンク、ウェブサイトなどの情報を表示するためのaboutページが必要になることがあります。これらの情報を表示するために、独自のアクティビティやフラグメントを設計する方法があります。これは、android studioのエディタで行うことができます。もう一つの簡単な方法は、定義済みのページを使用することです。そうすれば、これらのオプションだけで済みます。

この記事では、あらかじめデザインされたabout usページの例を見てみましょう。ここでは、以下のことを学びます。

  1. 美しいabout usページを作成する方法。

(a). Kotlin androidでおしゃれなabout usページを作成する方法。

この例では、fancy about us page libraryを使ってabout usページを作成する方法を探ります。以下の技術を使用しています。

  1. プログラミング言語。Java
  2. IDE Android Studio

ビデオチュートリアルをご紹介します。

以下は、その手順です。

Step 1: 依存関係の追加

アプリレベルのbuild.gradleファイルに、ファンシーなabout usページライブラリを追加します。

 implementation 'com.github.Shashank02051997:FancyAboutPage-Android:2.6'

その後、プロジェクトを同期します。

Step 2: Kotlin コード

続いて、メインのアクティビティを作成します。

MainActivity.ktを作成します。

まず、インポートを追加します。

import android.graphics.Color;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

次に、appcompatactivityを拡張してクラスを作成します。また、onCreateメソッドをオーバーライドします。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

FancyAboutUsPageを参照して、そのプロパティを設定します。

 val fancyAboutPage = findViewById<FancyAboutPage>(R.id.fancyaboutpage)
        //fancyAboutPage.setCoverTintColor(Color.BLUE); //Optional
        fancyAboutPage.setCover(R.drawable.coverimg)
        fancyAboutPage.setName("Shashank Singhal")
        fancyAboutPage.setDescription("Google Certified Associate Android Developer | Android App, Game, Web and Software Developer.")
        fancyAboutPage.setAppIcon(R.drawable.cakepop)
        fancyAboutPage.setAppName("Cake Pop Icon Pack")
        fancyAboutPage.setVersionNameAsAppSubTitle("1.2.3")
        fancyAboutPage.setAppDescription(
            """
    Cake Pop Icon Pack is an icon pack which follows Google's Material Design language.

    This icon pack uses the material design color palette given by google. Every icon is handcrafted with attention to the smallest details!

    A fresh new take on Material Design iconography. Cake Pop offers unique, creative and vibrant icons. Spice up your phones home-screen by giving it a fresh and unique look with Polycon.
    """.trimIndent()
        )
        fancyAboutPage.addEmailLink("shashanksinghal02@gmail.com")
        fancyAboutPage.addFacebookLink("https://www.facebook.com/shashanksinghal02")
        fancyAboutPage.addTwitterLink("https://twitter.com/shashank020597")
        fancyAboutPage.addLinkedinLink("https://www.linkedin.com/in/shashank-singhal-a87729b5/")
        fancyAboutPage.addGitHubLink("https://github.com/Shashank02051997")

以下が完全なコードです。

package info.camposha.ms_fancy_aboutpage

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.shashank.sony.fancyaboutpagelib.FancyAboutPage

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "About Page"
        supportActionBar!!.setDisplayHomeAsUpEnabled(true)
        window.decorView.systemUiVisibility = (
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
        val fancyAboutPage = findViewById<FancyAboutPage>(R.id.fancyaboutpage)
        //fancyAboutPage.setCoverTintColor(Color.BLUE); //Optional
        fancyAboutPage.setCover(R.drawable.coverimg)
        fancyAboutPage.setName("Shashank Singhal")
        fancyAboutPage.setDescription("Google Certified Associate Android Developer | Android App, Game, Web and Software Developer.")
        fancyAboutPage.setAppIcon(R.drawable.cakepop)
        fancyAboutPage.setAppName("Cake Pop Icon Pack")
        fancyAboutPage.setVersionNameAsAppSubTitle("1.2.3")
        fancyAboutPage.setAppDescription(
            """
    Cake Pop Icon Pack is an icon pack which follows Google's Material Design language.

    This icon pack uses the material design color palette given by google. Every icon is handcrafted with attention to the smallest details!

    A fresh new take on Material Design iconography. Cake Pop offers unique, creative and vibrant icons. Spice up your phones home-screen by giving it a fresh and unique look with Polycon.
    """.trimIndent()
        )
        fancyAboutPage.addEmailLink("shashanksinghal02@gmail.com")
        fancyAboutPage.addFacebookLink("https://www.facebook.com/shashanksinghal02")
        fancyAboutPage.addTwitterLink("https://twitter.com/shashank020597")
        fancyAboutPage.addLinkedinLink("https://www.linkedin.com/in/shashank-singhal-a87729b5/")
        fancyAboutPage.addGitHubLink("https://github.com/Shashank02051997")
    }
}

ステップ3: レイアウト

メインレイアウトに以下のコードを追加します。

<?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">
<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF">
    <com.shashank.sony.fancyaboutpagelib.FancyAboutPage
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fancyaboutpage"
        >

        <com.mikhaellopez.circularimageview.CircularImageView
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:layout_marginTop="180dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:src="@drawable/shashankprofileimg"
            app:civ_border_color="#40FFFFFF"
            app:civ_border_width="10dp"
            android:id="@+id/circularImageView" />

    </com.shashank.sony.fancyaboutpagelib.FancyAboutPage>

    </RelativeLayout>
</ScrollView>

    </RelativeLayout>

ステップ 4: 実行

プロジェクトを実行すると、以下のように表示されます。

About Us page Example Kotlin

ステップ 5: ダウンロード

コードをこちらからダウンロードします。

Categorized in:

ActivityJapanese