Android學習--制作ui界面

時間：2023-07-24 23:00:02 | 來源：網(wǎng)站運營

時間：2023-07-24 23:00:02 來源：網(wǎng)站運營

Android學習--制作ui界面：用Android制作一個簡單的聊天界面，大概像微信聊天那樣的界面

第一步，activity_main_xml的布局

這里用RecycleView安排消息的位置存放

值得注意的是RecycleView這個滾動控件 需要在build.gradle中添加依賴庫（紅框框出的那行）版本與appcompat一樣。

所以，activity_main中的布局大致是 上面為RecycleView存放的消息條目，最底下有一行輸入框和發(fā)送按鈕。如圖所示

以下是代碼

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#d8e0e8"> <android.support.v7.widget.RecyclerView android:id="@+id/msg_recycle_view" android:layout_height="0dp" android:layout_width="match_parent" android:layout_weight="1" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="type somethin here" android:maxLines="2"/> <Button android:id="@+id/send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Send" /> </LinearLayout></LinearLayout>

第二步：msg_item_xml 的布局

這個布局是對activity_main布局的補充，是對發(fā)送消息和接受消息進行處理。

發(fā)送的消息在右邊顯示，接受的消息在左邊顯示。 并且雙方的對話框背景不同。

大致效果如圖 （對話框背景圖片是我自己截圖找的，比較丑，大家可以自己制作 ）

試想：這樣的對話框放到上面布局各個條目中，是不是就是微信的聊天界面啦？

以下是代碼

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp"> <LinearLayout android:id="@+id/left_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:background="@drawable/left"> <TextView android:id="@+id/left_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:textColor="#fff"/> </LinearLayout> <LinearLayout android:id="@+id/right_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:background="@drawable/right"> <TextView android:id="@+id/right_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" /> </LinearLayout></LinearLayout>

第三步：Msg類

消息類 主要是封裝 消息內(nèi)容與 消息類型的類。

public class Msg { public static final int receive=0; public static final int send=1; private String content; private int type;//構(gòu)造方法 public Msg(String content,int type){ this.content=content; this.type=type; }//get方法 獲取內(nèi)容與消息類型 public String getContent(){ return content; } public int getType(){ return type; }}

第四步：MsgAdapter類

這個類主要是RecycleView的適配器類

實現(xiàn)RecycleView 各個子項的內(nèi)容 ，也就是接受消息還是發(fā)送消息的后臺處理與前端顯示。

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> { private List<Msg> mMsgList;//內(nèi)部類 ViewHoleder 繼承RecyclerView.ViewHoleder public class ViewHolder extends RecyclerView.ViewHolder{ TextView leftMsg; TextView righyMsg; LinearLayout leftlayout; LinearLayout rightlayout;//ViewHolder構(gòu)造函數(shù) 傳入?yún)?shù)view （這個參數(shù)是RecyclerView 子項的最外層布局）//這樣便可以用findViewById（）方法獲取linelayout和 TextView public ViewHolder(View view){ super(view); leftlayout=(LinearLayout) view.findViewById(R.id.left_layout); rightlayout=(LinearLayout)view.findViewById(R.id.right_layout); leftMsg=(TextView)view.findViewById(R.id.left_msg); righyMsg=(TextView)view.findViewById(R.id.right_msg); } }//MsgAdapter構(gòu)造函數(shù) 把數(shù)據(jù)源傳進來 賦值給新變量mMsgList 后續(xù)操作用mMsgList public MsgAdapter(List<Msg> msgList){ mMsgList=msgList; }//重寫RecyclerView.Adapter 的三個方法 @Override//這個方法是用于創(chuàng)建ViewHolder實例的 //加載 msg_item的布局 并傳入ViewHolder實例中 public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false); return new ViewHolder(view); } @Override //這個方法用于對子項的數(shù)據(jù)進行操作 判斷 賦值等。 public void onBindViewHolder(ViewHolder holder, int position) { Msg msg =mMsgList.get(position); if(msg.getType()==Msg.receive){//接受消息 在左邊布局顯示 holder.leftlayout.setVisibility(View.VISIBLE); holder.rightlayout.setVisibility(View.GONE); holder.leftMsg.setText(msg.getContent()); }else if(msg.getType()==Msg.send){ //發(fā)送消息 在右邊布局顯示 holder.rightlayout.setVisibility(View.VISIBLE); holder.leftMsg.setVisibility(View.GONE); holder.righyMsg.setText(msg.getContent()); } } @Override//獲取RecycleView的子項的個數(shù) public int getItemCount() { return mMsgList.size(); }}

第五步：MainActivity類

1.創(chuàng)建消息的數(shù)組隊列，用于存放消息

2.設置初始化消息

3.實例化輸入文本框，按鈕 的對象

4.創(chuàng)建RecyclerView滾動控件的實例化對象，并實現(xiàn)這個對象的布局方式和關(guān)聯(lián)數(shù)據(jù)。

public class MainActivity extends AppCompatActivity { private List<Msg> msgList = new ArrayList<>(); private EditText inputText; private Button send; private RecyclerView msgRecyclerView; private MsgAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化消息數(shù)據(jù) initMsgs(); //創(chuàng)建 輸入框與發(fā)送按鈕 的實例化對象 inputText = (EditText) findViewById(R.id.input_text); send = (Button) findViewById(R.id.send); //創(chuàng)建 RecyclerView 滾動控件的實例化對象 msgRecyclerView = (RecyclerView) findViewById(R.id.msg_recycle_view); //RecyclerView設置 LineLayout 的布局方式 LinearLayoutManager layoutManager = new LinearLayoutManager(this); msgRecyclerView.setLayoutManager(layoutManager); //RecyclerView設置適配器 并將消息的數(shù)據(jù)傳入適配器中 實現(xiàn)和數(shù)據(jù)的關(guān)聯(lián) adapter = new MsgAdapter(msgList); msgRecyclerView.setAdapter(adapter); //按鈕點擊事件 send.setOnClickListener(new View.OnClickListener() { @Override //按鈕點擊發(fā)送消息 public void onClick(View view) { String content =inputText.getText().toString(); if(!"".equals(content)){ Msg msg=new Msg(content,Msg.send); msgList.add(msg); adapter.notifyItemInserted(msgList.size()-1); //當有新消息時 刷新ListView中的顯示 msgRecyclerView.scrollToPosition(msgList.size()-1);//將ListView 定位到最后一行 inputText.setText("");//清空輸入框的內(nèi)容 } } }); } //初始的三條消息 private void initMsgs() { Msg msg1 = new Msg("Hello .", Msg.receive); msgList.add(msg1); Msg msg2 = new Msg("Hello who are you? ", Msg.send); msgList.add(msg2); Msg msg3 = new Msg("haha This is stinglog", Msg.receive); msgList.add(msg3); }}最終的效果大概是這樣的，我的也實現(xiàn)了 但是消息的背景圖片選的太丑了，就不在此獻丑了。

出現(xiàn)的問題：

一：

Error:java.lang.RuntimeException: Crunching Cruncher right.9.png failed, see log 問題解決。

這個問題是在前端界面上使用的.9.png 圖片有問題

存在這個問題的原因：

1.圖片非正規(guī)的.9.png格式，只是隨手將一張圖片改改尾綴，這樣會出現(xiàn)這個問題

2.通過draw9patch.bat（這個東西在android->sdk->tools->draw9patch.bat）制作后仍有此問題的原因是：制作不規(guī)范。點擊show bad patches 還會出現(xiàn)紅線的圖片就是不規(guī)范的

如圖。

3.9.png格式的圖片只能放在drawable文件中，放在其他地方會出錯。

解決方法：

改成正規(guī)格式，沒有錯誤的.9.png圖片即可。https://blog.csdn.net/u013472738/article/details/54619546

二：

編譯后安裝apk報錯：Error while Installing APK

解決方法：

找到app中的gradle的配置 刷新一下 再編譯即可。

具體原因看參考https://blog.csdn.net/qq_36525622/article/details/78996791

小結(jié)：

Android學習到現(xiàn)在為止 已經(jīng)差不多掌握清楚了如何實現(xiàn)一個UI界面，以及掌握了其中的大部分控件和布局方式。