Android 는 PopupWindow 를 사용 하여 아래쪽 창 기능 을 구현 합 니 다.

지식
PopupWindow 나 보기 애니메이션 의 모든 구체 적 인 사용 방식 을 상세 하 게 전개 하지 않 고 사용 하 는 대략적인 절차 와 지식 요점 만 소개 하고 구체 적 인 소 개 는 아래 디자인 실현 에서 설명 합 니 다.
(1)PopupWindow
1.초기 화

탄창 을 불 러 오 는 구조

4

PopupWindow 가 들 어 오 는 레이아웃 과 팝 업 창의 너비

레이아웃 안의 컨트롤 에 대한 조작

4.567917.구조 자체 에 대한 설정

//        
pwView = LayoutInflater.from(this).inflate(R.layout.pw_search_engine, null, false)
//    PopupWindow
popupWindow = PopupWindow(
 pwView,
 ViewGroup.LayoutParams.MATCH_PARENT,
 ViewGroup.LayoutParams.WRAP_CONTENT
)
//            
initRecyclerView()
//           
popupWindow.isOutsideTouchable = true
popupWindow.isTouchable = true
popupWindow.isFocusable = true
popupWindow.animationStyle = R.style.pw_bottom_anim_style
popupWindow.setOnDismissListener {
 backgroundAlpha(1f)
}

2.창 보 여주 기
팝 업 창 배경 밝기 수정-어 두 워 짐

//     
val rootView = LayoutInflater.from(this).inflate(R.layout.activity_main,null)
popupWindow.showAtLocation(rootView, Gravity.BOTTOM, 0, 0)
//       ―  
backgroundAlpha(0.7f)

3.창 닫 기

탄창 닫 기

배경 밝기 수정―밝 아 짐

//     
popupWindow.dismiss() 
//       ―  
backgroundAlpha(1f)

4.배경 밝기 수정

//       
private fun backgroundAlpha(bgAlpha: Float) {
 val lp = window.attributes
 lp.alpha = bgAlpha //0.0-1.0
 window.attributes = lp
}

(2)보기 애니메이션
XML 탭 을 사용 하여 보기 애니메이션 을 정의 하고 사용 합 니 다.
1.XML 태그
알파 그 라 데 이 션 투명도
scale 그 라 데 이 션 사이즈 신축
화면 위치 이동
화면 이동 회전
set 정의 애니메이션 집합
2.PopupWindow 에 애니메이션 추가

popupWindow.animationStyle = R.style.pw_bottom_anim_style

2.인터페이스 효과

3.디자인 실현
(1)수요 분석
홈 페이지 버튼 을 누 르 면 아래쪽 창 이 팝 업 됩 니 다

팝 업 창 엔진 을 클릭 하여 Toast 로 엔진 이름 을 표시 하고 팝 업 창 을 닫 습 니 다

팝 업 창 외 부 를 클릭 하면 팝 업 창 을 닫 을 수 있 습 니 다

(2)파일 목록

(3)레이아웃 디자인
1.메 인 인터페이스 스타일 디자인
（activity_main.xml）
메 인 인터페이스의 스타일 은 매우 간단 합 니 다.바로 일반적인 버튼 입 니 다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
 android:orientation="vertical"
 tools:context=".MainActivity">

 <Button
  android:id="@+id/btn"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="14dp"
  android:text="  ――    "
  android:textColor="@color/white"/>

</LinearLayout>

2.창 스타일 디자인
（pw_search_engine.xml）
팝 업 창 스타일 의 레이아웃 도 매우 간단 합 니 다.바로 기본 적 인 선형 레이아웃 의 RecyclerView 입 니 다.
주의해 야 할 것 은 가장 기본 적 인 layoutManager 는 지정 한 app:layoutManager 를 통 해 이 루어 질 수 있다 는 것 이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@color/white">

 <androidx.recyclerview.widget.RecyclerView
  android:id="@+id/recyclerView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:overScrollMode="never"
  app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</LinearLayout>

3.창 목록 아 이 템 스타일 디자인
（item_search_engine.xml）
목록 항목 은 데모 예제 이기 때문에 가로 레이아웃 을 간단하게 사용 하고 아이콘 icon 과 이름 TextView 를 내장 하여 보 여 줍 니 다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="horizontal"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center">

 <ImageView
  android:id="@+id/iconIV"
  android:layout_width="36dp"
  android:layout_height="36dp"
  android:layout_margin="14dp" />
  
 <TextView
  android:id="@+id/titleTV"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:layout_marginEnd="36dp"
  android:maxLines="1"
  android:ellipsize = "end"
  android:textColor="@color/black"
  android:textSize="16sp" />

</LinearLayout>

4.윈도우 애니메이션 디자인
（pw_bottom_in.xml 와 pwbottom_out.xml）

<!--pw_bottom_in.xml-->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <!--
      
  duration--      
  android:fromXDelta,android:fromYDelta--   x,y
  android:toXDelta,android:toYDelta--   x,y
 -->
 <translate
  android:duration="300"
  android:fromXDelta="0"
  android:fromYDelta="1000"
  android:toXDelta="0"
  android:toYDelta="0" />
</set>
<!--pw_bottom_out.xml-->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <translate
  android:duration="300"
  android:fromXDelta="0"
  android:fromYDelta="0"
  android:toXDelta="0"
  android:toYDelta="1000" />
</set>

(4)데이터 저장 및 로드
1.데이터 저장(UIData.kt 와 arrays.xml)

//           ，      icon    id     
data class SearchEngine(
 val title : String,
 val res : Int
)

검색엔진 의 이름과 대응 하 는 아이콘 자원 을 문자열 배열 로 저장 합 니 다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string-array name="search_engine_title_list">
  <item>  </item>
  <item>  </item>
  <item>360</item>
  <item>  </item>
  <item>  </item>
 </string-array>
 <string-array name="search_engine_res_list">
  <item>@drawable/ic_baidu</item>
  <item>@drawable/ic_sougou</item>
  <item>@drawable/ic_360</item>
  <item>@drawable/ic_bing</item>
  <item>@drawable/ic_shenma</item>
 </string-array>
</resources>

2.데이터 불 러 오기(MainActivity.kt)

private lateinit var engines : MutableList<SearchEngine>

private fun initData() {
	//        
 engines = mutableListOf()
	//   arrays.xml         
 val titleList = resources.getStringArray(R.array.search_engine_title_list)
	//      id    ，    arrays.xml         ，
	//              id    ，       
 val iconResList : MutableList<Int> = mutableListOf()
 //                 ，      ，     ，
 //      getResourceId(index,0)    icon     id          id    
 val resList: TypedArray = 
 resources.obtainTypedArray(R.array.search_engine_res_list)
 for (index in 0 until resList.length()) {
  iconResList.add(resList.getResourceId(index,0))
 }
 //        recycle()    TypedArray   
 resList.recycle()
	//   ，     title   id            ，         
 for (index in titleList.indices){
  if (index < iconResList.size){
   engines.add(SearchEngine(titleList[index],iconResList[index]))
  }
 }
}

(5)남 은 내용
위 에서 언급 한 내용 코드 는 더 이상 보 여 주지 않 습 니 다.밑 에 있 는 팝 업 창의 실현 을 소개 하 는 것 이 중점 이기 때문에 팝 업 창의 레이아웃 에 있 는 RecyclerView 의 실현 은 많은 소개 에 불과 합 니 다.
1.AdapterForSearchEngine.kt 팝 업 창 목록 어댑터

class AdapterForSearchEngine (dataList: MutableList<SearchEngine>) :
  RecyclerView.Adapter<AdapterForSearchEngine.ViewHolder>() {

 //         
 private val mDataList: MutableList<SearchEngine> = mutableListOf()

 init {
  //                
  mDataList.clear()
  mDataList.addAll(dataList)
 }

 // ViewHolder    item   
 class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {}

 //      item   
 override fun getItemCount(): Int {
  return mDataList.size
 }
 
 //        
 override fun onBindViewHolder(holder: ViewHolder, position: Int) {
  val engine: SearchEngine = mDataList[position]
  holder.itemView.titleTV.text = engine.title
  holder.itemView.iconIV.setImageResource(engine.res)

  holder.itemView.setOnClickListener {
   listener?.click(engine)
  }
 }

 //    ViewHolder   
 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
  val view: View = LayoutInflater.from(parent.context).inflate(R.layout.item_search_engine, parent, false)
  return ViewHolder(view)
 }

 //     
 private var listener :OnItemClickListener? = null

 interface OnItemClickListener {
  fun click(engine: SearchEngine)
 }

 fun setOnItemClickListener(listener: OnItemClickListener) {
  this.listener = listener
 }
}

2. MainActivity.kt

class MainActivity : AppCompatActivity() {

 private lateinit var engines : MutableList<SearchEngine>

 private lateinit var popupWindow : PopupWindow
 private lateinit var pwView : View

 private lateinit var mAdapter : AdapterForSearchEngine

 override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)
  //      
  initData()
  //     PopupWindow
  initPopupWindow()
  //       
  btn.setOnClickListener {
   //     
   showPopWindow()
  }
 }

 private fun initPopupWindow() {
  //       
  pwView = LayoutInflater.from(this).inflate(R.layout.pw_search_engine, null, false)
  //     PopupWindow
  popupWindow = PopupWindow(
    pwView,
    ViewGroup.LayoutParams.MATCH_PARENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
  )
  //        
  initRecyclerView()
  //    popupWindow
  popupWindow.isOutsideTouchable = true
  popupWindow.isTouchable = true
  popupWindow.isFocusable = true
  //       
  popupWindow.animationStyle = R.style.pw_bottom_anim_style
  //         ――    
  popupWindow.setOnDismissListener {
   backgroundAlpha(1f)
  }
 }

 private fun showPopWindow() {
  val rootView = LayoutInflater.from(this).inflate(
    R.layout.activity_main,
    null
  )
  //       
  popupWindow.showAtLocation(rootView, Gravity.BOTTOM, 0, 0)
  //         
  backgroundAlpha(0.7f)
 }

 //       
 private fun backgroundAlpha(bgAlpha: Float) {
  val lp = window.attributes
  lp.alpha = bgAlpha //0.0-1.0
  window.attributes = lp
 }

 private fun initRecyclerView() {
  mAdapter = AdapterForSearchEngine(engines)
  pwView.recyclerView?.adapter = mAdapter
  mAdapter.setOnItemClickListener(object : AdapterForSearchEngine.OnItemClickListener{
   override fun click(engine: SearchEngine) {
    Toast.makeText(this@MainActivity, engine.title, Toast.LENGTH_SHORT).show()
    popupWindow.dismiss()
   }
  })
 }

 private fun initData() {
  //        
  engines = mutableListOf()
  //   arrays.xml         
  val titleList = resources.getStringArray(R.array.search_engine_title_list)
  //      id    ，    arrays.xml         ，
  //              id    ，       
  val iconResList : MutableList<Int> = mutableListOf()
  //                 ，      ，     ，
  //      getResourceId(index,0)    icon     id          id    
  val resList: TypedArray =
    resources.obtainTypedArray(R.array.search_engine_res_list)
  for (index in 0 until resList.length()) {
   iconResList.add(resList.getResourceId(index,0))
  }
  //        recycle()    TypedArray   
  resList.recycle()
  //   ，     title   id            ，         
  for (index in titleList.indices){
   if (index < iconResList.size){
    engines.add(SearchEngine(titleList[index],iconResList[index]))
   }
  }
 }

}

안 드 로 이 드 가 PopupWindow 를 사용 하여 밑 에 있 는 팝 업 창 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 PopupWindow 밑 에 있 는 팝 업 창 내용 은 우리 의 이전 글 을 검색 하거나 아래 에 있 는 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!