주제
인스타그램
기능
-
가로 새로 스크롤 뷰
-
스토리 보기
XML
NestedScrollView HorizontalScrollView 이용
전체 스크롤 안에 가로 스크롤 있음
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginVertical="15dp">
<TextView
android:id="@+id/textView"
style="@style/instagram_title_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/instagram"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/iv_heart"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_heart"
app:layout_constraintBottom_toBottomOf="@+id/textView"
app:layout_constraintEnd_toStartOf="@+id/iv_message"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/textView"
app:layout_constraintTop_toTopOf="@+id/textView" />
<ImageView
android:id="@+id/iv_message"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_message"
app:layout_constraintBottom_toBottomOf="@+id/iv_heart"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/iv_heart"
app:layout_constraintTop_toTopOf="@+id/iv_heart" />
<HorizontalScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/textView">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/ib_story_1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/bg_round"
android:clipToOutline="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_img1"/>
<ImageButton
android:id="@+id/ib_story_2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:background="@drawable/bg_round"
android:clipToOutline="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_img2" />
<ImageButton
android:id="@+id/ib_story_3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:background="@drawable/bg_round"
android:clipToOutline="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_img3" />
<ImageButton
android:id="@+id/ib_story_4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:background="@drawable/bg_round"
android:clipToOutline="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_img4"/>
<ImageButton
android:id="@+id/ib_story_5"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginStart="10dp"
android:background="@drawable/bg_round"
android:clipToOutline="true"
android:scaleType="centerCrop"
android:src="@drawable/ic_img5"/>
</LinearLayout>
</HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
ActivityPage
- MainPage
스토리를 클릭하면 이미지를 보여줌
메인 페이지에서 스토리 페이지로 클릭값을 put함
val imageBtn1 = findViewById<ImageButton>(R.id.ib_story_1)
val imageBtn2 = findViewById<ImageButton>(R.id.ib_story_2)
val imageBtn3 = findViewById<ImageButton>(R.id.ib_story_3)
val imageBtn4 = findViewById<ImageButton>(R.id.ib_story_4)
val imageBtn5 = findViewById<ImageButton>(R.id.ib_story_5)
imageBtn1.setOnClickListener {
val intent = Intent(this, StoryPage::class.java)
intent.putExtra("img_src", "story_1")
startActivity(intent)
}
imageBtn2.setOnClickListener {
val intent = Intent(this, StoryPage::class.java)
intent.putExtra("img_src", "story_2")
startActivity(intent)
}
imageBtn3.setOnClickListener {
val intent = Intent(this, StoryPage::class.java)
intent.putExtra("img_src", "story_3")
startActivity(intent)
}
imageBtn4.setOnClickListener {
val intent = Intent(this, StoryPage::class.java)
intent.putExtra("img_src", "story_4")
startActivity(intent)
}
imageBtn5.setOnClickListener {
val intent = Intent(this, StoryPage::class.java)
intent.putExtra("img_src", "story_5")
startActivity(intent)
}사용자가 Instagram 텍스트를 클릭하면 해당 인스타 페이지가 웹 브라우저에 표시됨
val instagram = findViewById<TextView>(R.id.textView)
val url = "https://www.instagram.com/0_12.22/"
instagram.setOnClickListener {
val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
startActivity(intent)
}- StoryPage
intent로 부터 이미지 이름을 받아오고, 해당 이름을 통해 이미지 리소스의 ID를 찾은 다음, 이를 ImageView에 설정하여 화면에 이미지를 표시함
val imageName = intent.getStringExtra("img_src")
val imageView = findViewById<ImageView>(R.id.iv_story_1)
val resourceId = resources.getIdentifier(imageName, "drawable", packageName)
imageView.setImageResource(resourceId)회고
드디어 스탠다드 과제를 마무리 했다..
제출은 하고 싶었지만 계속 시작하지 못해서 결국 수업 전날 밤을 새워 진행했다
시간이 부족해 원하는 기능들을 구현하지 못한 점이 너무 아쉬웠다.
다음번에는 시간을 더 잘 관리해서 완성도 높은 결과물을 제출할 수 있도록 노력하겠다!!
+추가+
마무리한 과제를 TIL에 어떻게 녹여야 할지 잘 몰라서 좀 더 찾아봐야 할 것 같다!!!
