Android 위 챗 태그 모방 기능
여기 에는 세 가지 상태의 탭 이 있 습 니 다.각각 선택 되 지 않 았 습 니 다.선택,편집 중 입 니 다.앞의 두 탭 은 입력 을 제공 할 필요 가 없 기 때문에 TextView 로 이 루어 지면 됩 니 다.편집 중인 탭 은 EditText 로 이 루어 집 니 다.라벨 의 모양 은 Shape 로 이 루어 집 니 다.
drawable 에서 xml 파일 을 새로 만 듭 니 다.여 기 는 Shape 의 xml 파일 을 먼저 올 립 니 다.
tag_normal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<stroke android:width="1dp" android:color="#66CDAA" />
<padding
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
</shape>
tag_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<stroke android:width="1dp" android:color="#66CDAA" />
<padding
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
</shape>
tag_edit.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<!-- -->
<stroke android:dashWidth="5dp" android:dashGap="2dp" android:width="1dp" android:color="#e0e0e0" />
<padding
android:bottom="4dp"
android:left="8dp"
android:right="8dp"
android:top="4dp" />
</shape>
이 어 레이아웃 파일 에 레이 블 을 저장 하기 위해 LinearLayout 를 새로 만 듭 니 다.activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/tag_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="com.qtree.tagdemo.MainActivity">
</LinearLayout>
위 챗 태그 에 대한 분석 에 따 르 면 이 를 통 해 EditText 를 만 들 고 소프트 키보드 의 Enter 와 Delete 버튼 을 감청 할 수 있 습 니 다.입력 이 완료 되면 Enter 를 누 르 면 탭 을 생 성하 여 LinearLayout 에 추가 합 니 다.그리고 탭 에 텍스트 가 비어 있 을 때 삭제 키 를 누 르 면 이전 탭 의 상 태 를 선택 한 상태 로 변경 합 니 다.마찬가지 로 선택 하지 않 은 탭 을 누 르 면 이 탭 을 선택 하여 삭제 할 수 있 습 니 다.상세 실현 은 다음 과 같다.
package com.qtree.tagdemo;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private LinearLayout layout;
private LinearLayout.LayoutParams params;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layout=(LinearLayout)findViewById(R.id.tag_container);
params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.setMargins(30,30,0,0);
//
final List<TextView> tagView=new ArrayList<>();
final List<Boolean> tagViewState=new ArrayList<>();
//
final EditText editText=new EditText(getApplicationContext());
editText.setHint(" ");
//
editText.setMinEms(4);
editText.setTextSize(12);
// shape
editText.setBackgroundResource(R.drawable.tag_edit);
editText.setHintTextColor(Color.parseColor("#b4b4b4"));
editText.setTextColor(Color.parseColor("#000000"));
editText.setLayoutParams(params);
// layout
layout.addView(editText);
// Enter Del
editText.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (KeyEvent.ACTION_DOWN == event.getAction()) {
switch (keyCode) {
case KeyEvent.KEYCODE_ENTER:
String editTextContent = editText.getText().toString();
//
if (editTextContent.equals(""))
return true;
//
for(TextView tag:tagView){
String tempStr=tag.getText().toString();
if(tempStr.equals(editTextContent)) {
Log.e("tag"," ");
editText.setText("");
editText.requestFocus();
return true;
}
}
//
final TextView temp = getTag(editText.getText().toString());
tagView.add(temp);
tagViewState.add(false);
// , ,
temp.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int curIndex = tagView.indexOf(temp);
if (!tagViewState.get(curIndex)) {
// ×
temp.setText(temp.getText() + " ×");
temp.setBackgroundResource(R.drawable.tag_selected);
temp.setTextColor(Color.parseColor("#ffffff"));
//
tagViewState.set(curIndex, true);
} else {
layout.removeView(temp);
tagView.remove(curIndex);
tagViewState.remove(curIndex);
}
}
});
layout.addView(temp);
//
editText.bringToFront();
//
editText.setText("");
editText.requestFocus();
return true;
case KeyEvent.KEYCODE_DEL:
int lastIndex = tagView.size() - 1;
//
if (lastIndex < 0)
return false;
//
TextView prevTag = tagView.get(lastIndex);
// Del , Del
if (tagViewState.get(lastIndex)) {
tagView.remove(prevTag);
tagViewState.remove(lastIndex);
layout.removeView(prevTag);
} else {
String te = editText.getText().toString();
if (te.equals("")) {
prevTag.setText(prevTag.getText() + " ×");
prevTag.setBackgroundResource(R.drawable.tag_selected);
prevTag.setTextColor(Color.parseColor("#ffffff"));
tagViewState.set(lastIndex, true);
}
}
break;
}
}
return false;
}
});
//
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
//
for (int i = 0; i < tagViewState.size(); i++) {
if (tagViewState.get(i)) {
TextView tmp = tagView.get(i);
tmp.setText(tmp.getText().toString().replace(" ×", ""));
tagViewState.set(i, false);
tmp.setBackgroundResource(R.drawable.tag_normal);
tmp.setTextColor(Color.parseColor("#66CDAA"));
}
}
}
@Override
public void afterTextChanged(Editable s) {
}
});
}
/**
*
* @param tag
* @return
*/
private TextView getTag(String tag){
TextView textView=new TextView(getApplicationContext());
textView.setTextSize(12);
textView.setBackgroundResource(R.drawable.tag_normal);
textView.setTextColor(Color.parseColor("#66CDAA"));
textView.setText(tag);
textView.setLayoutParams(params);
return textView;
}
}
효과 가 좋다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.