对于我们再熟悉不过的手机拨号键盘，今天来讲解其中的交互效果：

当鼠标的悬浮、按下时，键盘的按键背景色发生变化；
当点击按下数字字母按钮时，将输入对应的数字，同时显示“添加号码”按钮和“删除”按钮；
当点击“删除”按钮时，将删除号码最后面的一个数字；当数字全部删除时，“添加号码”按钮和“删除”按钮全部隐藏。



交互讲解一：鼠标的悬浮、按下交互
选中12个数字符号按钮，在其【属性】栏中的交互样式，设置鼠标悬浮和按下时，填充色的变化。


交互讲解二：数字符号的输入
利用全局变量，文本函数[[This.text]]和[[Target.text]]实现数字输入的交互。
1. 添加全局变量
顶部菜单栏【项目】-【全局变量】，添加全局变量，命名随意取，本教程取为：number。


2. 设置鼠标单击时事件交互
1）选中任意数字按钮，双击属性栏中【鼠标单击时】，左侧动作栏中【全局变量】-【设置全局变量】，勾选全局变量【number】，其值设置[[This.text]]——即鼠标单击某个按钮的值（当按下按钮1，则number为1；当按下2，则number为2）。


2）为了实现，点击数字按钮时，号码输入框累积输入该数字，因此：
在左侧动作栏【元件】-【设置文本】，勾选【号码文本框】，将文本值设置为[[Target.text]][[number]]。
（其中，[[Target.text]]代表文本框之前的文本值，[[number]]代表刚点击的按钮值。）


接下来，直接将此交互事件复制粘贴到其他按钮上面即可，是不是很简单粗暴。
交互讲解三：数字符号的删除
主要利用函数[[LVAR.length]]：获得元件字符串的长度（即1234.length=4）；以及函数[[LVAR.substring(from,to)]]：截取第from位到to位的字符串。
（即[[12345.substring(1,4)]]=234，也就是说截取第一位到第四位的数字但不包括第一位。）
1. 设置鼠标单击时事件交互
选中【删除】按钮，双击属性栏中【鼠标单击时】，在左侧动作栏【元件】-【设置文本】，勾选【号码文本框】，其文本值设为[[LVAR1.substr(0,LVAR1.length-1)]]。
（其中，LVAR1为局部变量，代表为【号码文本框】的元件文字，从末尾倒数第2位截取前面文字）




交互讲解四：添加号码按钮和删除按钮的显示隐藏
此交互主要判断号码文本框的值是否为空，当按下数字按钮，即添加一个数字值，值不为空，显示元件【添加号码】按钮和【删除】按钮；当值为空，则隐藏。
1. 设置文本改变时交互事件
1）选中【号码文本框】，双击属性【文本改变时】，选中【元件】-【显示】，勾选元件【添加号码】按钮和【删除】按钮，设置为显示。


为其添加条件：当号码文本框This的文字长度大于0时，即有值时，显示元件。


2）再次双击属性【文本改变时】，选中【元件】-【显示】，勾选元件【添加号码】按钮和【删除】按钮，设置为隐藏；作为反例Else if Ture，不需再设置条件。最终交互事件如下所示：

最终预览效果
获取更多高保真原型和学习更多教程，可关注本人公众号：艾斯的Axure峡谷。

欢迎大家留言评论，也可以留下你期待看到的交互效果。

制作手机拨号键盘也只是粗略的实现了一下。  

先来看看布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f7f7f7"
    >
    <RelativeLayout
        android:id="@+id/rela_dis"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <LinearLayout
        android:id="@+id/pop_line_layput"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f7f7f7"
        >
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#f7f7f7"
            ></View>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_45"
        android:background="#f7f7f7"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView

            android:id="@+id/tv_text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="50"
            android:gravity="center"
            android:text=""
            android:ellipsize="none"
            android:singleLine="true"
            android:maxLines="100"
            android:scrollHorizontally="false"
            android:textColor="#616161"
            android:textSize="@dimen/sp_28" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/bt_one"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_57"
            android:layout_weight="1"
            android:text="1"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_two"
            android:layout_width="@dimen/dp_125"
            android:layout_height="@dimen/dp_57"
            android:layout_weight="1"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:gravity="center"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_three"
            android:layout_width="@dimen/dp_123"
            android:layout_height="@dimen/dp_57"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/bt_four"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="4"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_five"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:gravity="center"
            android:text="5"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_six"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="6"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/bt_seven"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="7"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_eight"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="8"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_nine"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="9"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/bt_star"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="*"
            android:gravity="center_horizontal"
            android:layout_gravity="center_vertical"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_32" />

        <TextView
            android:id="@+id/bt_zero"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="0"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />

        <TextView
            android:id="@+id/bt_bottom"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_50"
            android:layout_weight="1"
            android:text="#"
            android:gravity="center"
            android:textColor="@drawable/button_font_style"
            android:background="@drawable/btn"
            android:textSize="@dimen/sp_25" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_70"
        android:background="#ffffff"
        >
            <LinearLayout
                android:id="@+id/line_diss"
                android:background="#ffffff"
                android:gravity="center"
                android:layout_marginRight="@dimen/dp_1"
                android:layout_width="@dimen/dp_119"
                android:layout_height="@dimen/dp_53">
        <ImageView
                android:id="@+id/image_hide"
                android:layout_width="@dimen/dp_21"
                android:layout_height="@dimen/dp_24"
                android:src="@mipmap/hide"
                />
            </LinearLayout>

        <LinearLayout
            android:background="#ffffff"
            android:gravity="center"
            android:layout_marginRight="@dimen/dp_1"
            android:orientation="horizontal"
            android:layout_width="@dimen/dp_120"
            android:layout_height="@dimen/dp_53">
            <ImageView
                android:id="@+id/image_callphone"
                android:layout_width="@dimen/dp_46"
                android:layout_height="@dimen/dp_46"
                android:src="@mipmap/callphone"
                android:layout_marginRight="@dimen/dp_7"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/line_delete"
            android:background="#ffffff"
            android:gravity="center"
            android:layout_width="@dimen/dp_122"
            android:layout_height="@dimen/dp_53">
            <ImageView
                android:id="@+id/image_deletenumber"
                android:layout_width="@dimen/dp_28"
                android:layout_height="@dimen/dp_29"
                android:src="@mipmap/deletenumber"

                />
        </LinearLayout>
    </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#cecece"
            ></View>
    </LinearLayout>
    </RelativeLayout>
</LinearLayout>

 

   主代码

private void dialog() {
    view = LayoutInflater.from(getActivity()).inflate(
            R.layout.popup_layout_item, null);
    popupWindow = new PopupWindow(view,
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT, true);
    popupWindow.setAnimationStyle(R.style.MyPopupWindow_anim_style);
    tv_text2 = view.findViewById(R.id.tv_text2);
    bt_zero = view.findViewById(R.id.bt_zero);
    bt_one = view.findViewById(R.id.bt_one);
    bt_two = view.findViewById(R.id.bt_two);
    bt_three = view.findViewById(R.id.bt_three);
    bt_four = view.findViewById(R.id.bt_four);
    bt_five = view.findViewById(R.id.bt_five);
    bt_six = view.findViewById(R.id.bt_six);
    bt_seven = view.findViewById(R.id.bt_seven);
    bt_eight = view.findViewById(R.id.bt_eight);
    bt_nine = view.findViewById(R.id.bt_nine);
    bt_star = view.findViewById(R.id.bt_star);
    bt_bottom = view.findViewById(R.id.bt_bottom);
    String text1 ="1 ive";
    String text2 ="2 abc";
    String text3 ="3 def";
    String text4 ="4 ghi";
    String text5 ="5 jkl";
    String text6 ="6 mno";
    String text7 ="7pors";
    String text8 ="8 tuv";
    String text9 ="9wxyz";
    String text0 ="0 +   ";
    String text11 ="* p  ";
    String text12 ="* W  ";
    SpannableString textSpan1 = new SpannableString (text1);
    SpannableString textSpan2 = new SpannableString (text2);
    SpannableString textSpan3 = new SpannableString (text3);
    SpannableString textSpan4 = new SpannableString (text4);
    SpannableString textSpan5 = new SpannableString (text5);
    SpannableString textSpan6 = new SpannableString (text6);
    SpannableString textSpan7 = new SpannableString (text7);
    SpannableString textSpan8 = new SpannableString (text8);
    SpannableString textSpan9= new SpannableString (text9);
    SpannableString textSpan0= new SpannableString (text0);
    int start = text1.indexOf('i');
    int end = text1.length();
    int start1 = text2.indexOf('a');
    int end1 = text2.length();
    int start2 = text3.indexOf('d');
    int end2 = text3.length();
    int start3 = text4.indexOf('g');
    int end3 = text4.length();
    int start4 = text5.indexOf('j');
    int end4 = text5.length();
    int start5 = text6.indexOf('m');
    int end5 = text6.length();
    int start6 = text7.indexOf('p');
    int end6 = text7.length();
    int start7 = text8.indexOf('t');
    int end7 = text8.length();
    int start8 = text9.indexOf('w');
    int end8 = text9.length();
    int start0 = text0.indexOf('+');
    int end0 = text0.length();
    textSpan1.setSpan(new AbsoluteSizeSpan(80),0,start,Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    textSpan1.setSpan(new AbsoluteSizeSpan(30),start,end,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan2.setSpan(new AbsoluteSizeSpan(80),0,start1,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan2.setSpan(new AbsoluteSizeSpan(30),start1,end1,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan3.setSpan(new AbsoluteSizeSpan(80),0,start2,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan3.setSpan(new AbsoluteSizeSpan(30),start2,end2,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan4.setSpan(new AbsoluteSizeSpan(80),0,start3,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan4.setSpan(new AbsoluteSizeSpan(30),start3,end3,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan5.setSpan(new AbsoluteSizeSpan(80),0,start4,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan5.setSpan(new AbsoluteSizeSpan(30),start4,end4,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan6.setSpan(new AbsoluteSizeSpan(80),0,start5,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan6.setSpan(new AbsoluteSizeSpan(30),start5,end5,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan7.setSpan(new AbsoluteSizeSpan(80),0,start6,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan7.setSpan(new AbsoluteSizeSpan(30),start6,end6,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan8.setSpan(new AbsoluteSizeSpan(80),0,start7,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan8.setSpan(new AbsoluteSizeSpan(30),start7,end7,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan9.setSpan(new AbsoluteSizeSpan(80),0,start8,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan9.setSpan(new AbsoluteSizeSpan(30),start8,end8,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan0.setSpan(new AbsoluteSizeSpan(80),0,start0,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    textSpan0.setSpan(new AbsoluteSizeSpan(30),start0,end0,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
    bt_two = view.findViewById(R.id.bt_two);
    bt_three = view.findViewById(R.id.bt_three);
    bt_four = view.findViewById(R.id.bt_four);
    bt_five = view.findViewById(R.id.bt_five);
    bt_six = view.findViewById(R.id.bt_six);
    bt_seven = view.findViewById(R.id.bt_seven);
    bt_eight = view.findViewById(R.id.bt_eight);
    bt_nine = view.findViewById(R.id.bt_nine);
    bt_star = view.findViewById(R.id.bt_star);
    bt_bottom = view.findViewById(R.id.bt_bottom);
    bt_one.setText(textSpan1);
    bt_two.setText(textSpan2);
    bt_three.setText(textSpan3);
    bt_four.setText(textSpan4);
    bt_five.setText(textSpan5);
    bt_six.setText(textSpan6);
    bt_seven.setText(textSpan7);
    bt_eight.setText(textSpan8);
    bt_nine.setText(textSpan9);
    bt_zero.setText(textSpan0);
    image_deletenumber = view.findViewById(R.id.image_deletenumber);
    image_callphone = view.findViewById(R.id.image_callphone);
    image_hide = view.findViewById(R.id.image_hide);
    line_diss = view.findViewById(R.id.line_diss);
    rela_dis = view.findViewById(R.id.rela_dis);
    line_delete = view.findViewById(R.id.line_delete);
    popupWindow.setFocusable(false);// 取得焦点
    //注意  要是点击外部空白处弹框消息  那么必须给弹框设置一个背景色  不然是不起作用的
    popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    //点击外部消失
    popupWindow.setOutsideTouchable(true);
    //设置可以点击
    popupWindow.setTouchable(true);
    bt_zero.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_zero);
            all += 0;
            tv_text2.setText(all);
        }
    });
    bt_one.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_one);
            all +=1;
            tv_text2.setText(all);
        }
    });

    bt_two.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_two);
            all += 2;
            tv_text2.setText(all);
        }
    });

    bt_three.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_three);
            all += 3;
            tv_text2.setText(all);
        }
    });

    bt_four.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_four);
            all += 4;
            tv_text2.setText(all);
        }
    });

    bt_five.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_five);
            all += 5;
            tv_text2.setText(all);
        }
    });

    bt_six.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_six);
            all += 6;
            tv_text2.setText(all);
        }
    });
    bt_seven.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_seven);
            all += 7;
            tv_text2.setText(all);
        }
    });

    bt_eight.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_eight);
            all += 8;
            tv_text2.setText(all);
        }
    });

    bt_nine.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_nine);
            all += 9;
            tv_text2.setText(all);
        }
    });

    bt_star.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_star);
            all += tempText.getText().toString();
            tv_text2.setText(all);
        }
    });

    bt_bottom.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {
            tempText = (TextView) view.findViewById(R.id.bt_bottom);
            all += tempText.getText().toString();
            tv_text2.setText(all);
        }
    });
    image_callphone.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            popupWindow.dismiss();
        
        }
    });

    line_delete.setOnLongClickListener(new View.OnLongClickListener() {
        @Override
        public boolean onLongClick(View view) {
            String s = tv_text2.getText().toString();

            new Handler().postDelayed(new Runnable(){
                public void run() {
                    for (int i = 0; i < s.length(); i++) {
                        if (s.length() > 0) {
                            all = all.substring(0, all.length() - 1);
                            tv_text2.setText(all);
                        }
                        //execute the task
                    }
                }
            }, 200);
            Collections.reverse(infos);
            adapter = new MyAdapter(infos, getActivity());
            callView.setAdapter(adapter);
            List<CallLogInfo> list = new ArrayList<>();
            adapter.notifyDataSetChanged();
            return true;
        }
    });

    tv_text2.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            incomingNumber = tv_text2.getText().toString().replace(" ", "");
            if (incomingNumber.length()==0){
                listSeleteView.setVisibility(View.GONE);
            }else{

                listSeleteView.setVisibility(View.VISIBLE);
                showListView();



            }
        }

        @Override
        public void afterTextChanged(Editable editable) {


        }
    });
    line_delete.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            String s = tv_text2.getText().toString();
            if (s.length() > 0) {
                all = all.substring(0, all.length() - 1);
                tv_text2.setText(all);
            }
        }
    });
    line_diss.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            popupWindow.dismiss();
        }
    });


}

以上就可以很轻松的实现手机拨号键盘功能了，大神们有好的建议请告知本人。。谢谢

结果图：



手机上测试可以参考：PC运行的代码，在手机上查看效果

核心代码： 

（注：a标签里面的代码是不可以修改的，修改的话就无法调取了）

<a :href="'tel:'+tel">拨打客服</a>

代码如下：

<template>
  <div id="hello_world">
    <div class="call_btn">
      <a :href="'tel:'+tel">拨打客服</a>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        msg:'',
        tel:10086
      }
    }
  }
</script>
<style scoped="scoped">
.call_btn{
  width: 90%;
  height: 40px;
  line-height: 40px;
  background:#55b737;
  text-align: center;
  margin:20px auto;
  border-radius: 10px;
}
.call_btn a{
  color: #FFFFFF;
  text-decoration: none;
}
</style>


------------完。

介绍：
临时停车自动拨号发短信源码（新增背景版）

修正了两处结束符号，增加了背景分为两套源码（检测到手机打开才会自动弹出）第一套：自动拨号访问自动弹到拨号界面，并自动输入手机号。

第二套：自动短信访问自动弹到短信界面，并自动输入短信内容和手机号。

自动电话演示地址：http://xcx.ccvxx.cn/box/ngc/xiaok/dh/（检测到手机打开才会自动弹出）

自动短信演示地址：http://xcx.ccvxx.cn/box/ngc/xiaok/dx/（检测到手机打开才会自动弹出）


网盘下载地址：
https://zijiewangpan.com/p1FaifZ6ksj


图片：