Android TextView UI

Display rich text

rendering

3. Layout file


      
<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">

    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"/>

    <TextView
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:autoLink="all"/>


</LinearLayout>
Copy the code

Logic code

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.text1)
    TextView mTextView1;

    @BindView(R.id.text2)
    TextView mTextView2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        String html = "<font color ='red'>Hello android</font><br/>";
        html+="<font color='#0000ff'><big><i>Hello android</i></big></font><p>";
        html+="< big > < a href =" http://www.baidu.com "> baidu < / a > < / big >";

        // Use html. fromHtml to convert strings containing Html tags into displayable text styles
        Spanned spanned = Html.fromHtml(html, Html.FROM_HTML_MODE_LEGACY);
        mTextView1.setText(spanned);

        mTextView1.setMovementMethod(LinkMovementMethod.getInstance());

        String text="My URL:http://www.cnblogs.com/plokmju/\n";
        text+="My email:[email protected] \ n";
        text+="My phone number: +86 010-12345678"; mTextView2.setText(text); }}Copy the code

Two, running lantern effect

1. Horizontal running lantern

Effect:

Single implementation running lantern:


      
<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="com.gyq.marqueedemo.marqueedemo.MainActivity">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>
    

</LinearLayout>

Copy the code

1, a custom class, inherit TextView;

package com.gyq.marqueedemo.marqueedemo.widget;

import android.annotation.SuppressLint;
import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.widget.TextView;

/** * Created by gyq on 2018/1/5 13:42 */

@SuppressLint("AppCompatCustomView")
public class MarqueeTextView extends TextView {
    public MarqueeTextView(Context context) {
        super(context);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MarqueeTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean isFocused(a) {
        return true; }}Copy the code

Layout file:


      
<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="com.gyq.marqueedemo.marqueedemo.MainActivity">

    <com.gyq.marqueedemo.marqueedemo.widget.MarqueeTextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>
    <com.gyq.marqueedemo.marqueedemo.widget.MarqueeTextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:singleLine="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusableInTouchMode="true"
        android:text="@string/hello_word"/>

</LinearLayout>

Copy the code

3. Vertical running lantern

3.1 rendering

3.2 the Bean class

public class FootBall {
    private String name;
    private String title;

    public String getName(a) {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTitle(a) {
        return title;
    }

    public void setTitle(String title) {
        this.title = title; }}Copy the code

3.3 Customizing the View

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ViewAnimator;

import com.epro.test.R;

import java.util.List;

/**
 * Created on 2019/11/26 16:13
 *
 * @author Gong Youqiang
 */
public class VerticalMarquee extends ViewAnimator {
    private static final long DEFAULT_TIMER = 2000L;
    private long delayTime = DEFAULT_TIMER;
    private int viewIndex;
    private List<View> views;
    private static Handler handler = new Handler();
    private boolean started;// Whether the rotation has started
    
    public VerticalMarquee(Context context) {
        this(context,null);
    }

    public VerticalMarquee(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init(a) {
        this.setInAnimation(AnimationUtils.loadAnimation(this.getContext(), R.anim.vertical_marquee_in));
        this.setOutAnimation(AnimationUtils.loadAnimation(this.getContext(), R.anim.vertical_marquee_out));
    }

    protected void onFinishInflate(a) {
        super.onFinishInflate();
    }

    private void startMarquee(a) {
        if (this.views ! =null) {
            if (this.views.size() > 1) {
                handler.postDelayed(new Runnable() {
                    public void run(a) {
                        VerticalMarquee.this.viewIndex++;
                        if (VerticalMarquee.this.viewIndex >= VerticalMarquee.this.views.size()) {
                            VerticalMarquee.this.viewIndex = 0;
                        }
                        showNext();
                        VerticalMarquee.handler.postDelayed(this, delayTime);
                    }
                }, delayTime);
                started = true;
            } else if (this.views.size() > 0) {
                this.viewIndex = 0;
            } else {
                this.viewIndex = 0; }}else {
            this.viewIndex = 0; }}/** * get the currently displayed View * change the method name to avoid the same name as the parent method **@return View
     */
    public View getCurView(a) {
        if (this.views ! =null && this.viewIndex >= 0 && this.viewIndex < this.views.size()) {
            return this.views.get(this.viewIndex);
        }

        return null;
    }

    /** * Get the index of the current View@return index
     */
    public int getCurIndex(a) {
        return this.viewIndex;
    }

    /** * Sets the View list for rotation, this method will automatically rotate **@paramViews View list */
    public void setViewList(List<View> views) {
        setViewList(views, DEFAULT_TIMER);
    }

    /** * Sets the View list for rotation, this method will automatically rotate **@paramViews View list *@paramDelayTime Intermittent time */
    public void setViewList(final List<View> views, long delayTime) {
        if (views == null || views.size() == 0) {
            return;
        }
        if (delayTime >= 100) {
            // At least 100 milliseconds, otherwise default
            this.delayTime = delayTime;
        }
        this.views = views;
        handler.removeCallbacksAndMessages(null);
        started = false;
        post(new Runnable() {
            @Override
            public void run(a) {
                for(View view : views) { addView(view); } startMarquee(); }}); }// Start the countdown (rotation), which is called when the page is visible and automatic rotation is required
    public void startTimer(a) {
        if (started || views == null || views.size() <= 1) {
            return;
        }
        stopTimer();
        startMarquee();
    }

    // Stop the countdown (rotation) if startTimer() was called; Call this method to stop automatic rotation when the page is not visible
    public void stopTimer(a) {
        if(handler ! =null) {
            handler.removeCallbacksAndMessages(null);
            started = false; }}}Copy the code

3.4 Creating the anim folder vertical_marquee_out.xml


      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="-100%p" >

</translate>
Copy the code

vertical_marquee_out.xml


      
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="100%p"
    android:toYDelta="0">

</translate>
Copy the code

3.5 Layout file activity.xml


      
<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="wrap_content"
    android:gravity="center"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="26sp"
        android:text="Headline"/>

    <com.epro.test.widget.VerticalMarquee
        android:id="@+id/vm_root"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>
Copy the code

marquee_item.xml


      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="44dp">

    <TextView
        android:id="@+id/marquee_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@color/text_bg"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingRight="10dp"
        android:paddingBottom="5dp"
        android:textColor="@color/text_color"
        android:textSize="11dp"
        tools:text="Here's the title." />

    <TextView
        android:id="@+id/marquee_desc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/black"
        android:textSize="14dp"
        tools:text="Here is the content ~" />
</LinearLayout>
Copy the code

3.6 MainActivity. Java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

import com.epro.test.bean.FootBall;
import com.epro.test.widget.VerticalMarquee;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.vm_root)
    VerticalMarquee mText;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initData();

    }

    private void initData(a) {
        List<View> views = new ArrayList<>();
        LayoutInflater inflater = LayoutInflater.from(this);
        FootBall ballx = new FootBall();
        ballx.setName("Serie a");
        ballx.setTitle("Surrey votes for Cristiano Ronaldo");
        views.add(inflateView(inflater, mText, ballx));

        FootBall bally = new FootBall();
        bally.setName("The premier league." ");
        bally.setTitle("Jose Mourinho as manager of Tottenham");
        views.add(inflateView(inflater, mText, bally));

        FootBall ballh = new FootBall();
        ballh.setName("The Spanish");
        ballh.setTitle("Real Madrid Vs Barcelona on December 4th.");
        views.add(inflateView(inflater, mText, ballh));
        mText.setViewList(views);
    }

    private View inflateView(LayoutInflater inflater, VerticalMarquee marqueeRoot, FootBall ball) {
        if (inflater == null) {
            inflater = LayoutInflater.from(this);
        }
        View view = inflater.inflate(R.layout.marquee_item, marqueeRoot, false);
        TextView viewName = view.findViewById(R.id.marquee_name);
        TextView viewDesc = view.findViewById(R.id.marquee_desc);
        viewName.setText(ball.getName());
        viewDesc.setText(ball.getTitle());
        returnview; }}Copy the code

Display fonts of different sizes

rendering

2. activity_main.xml


      
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:layout_marginEnd="3dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code

StrUtil.java

/**
 * created on 2020/5/13 21:43
 *
 * @author Scarf Gong
 */
public class StrUtil {
    public static String formatToSepara(String data) {
        try {
            double value = Double.parseDouble(data);
            DecimalFormat df = new DecimalFormat("# # # #");
            return df.format(value);
        } catch (Exception e) {
            e.printStackTrace();
        }
        returndata; }}Copy the code

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = findViewById(R.id.textView);
        String data1 = StrUtil.formatToSepara("6663") +"/ 10000";
        Spannable sp = new SpannableString(data1);
        sp.setSpan(new AbsoluteSizeSpan(25.true),0,data1.length() - 6,
                Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        textView.setText(sp);

        TextView textView2 = findViewById(R.id.textView2);
        String data2 = StrUtil.formatToSepara("28") +"Minutes";
        Spannable sp2 = new SpannableString(data2);
        sp2.setSpan(new AbsoluteSizeSpan(25.true),0,data2.length() - 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE); textView2.setText(sp2); }}Copy the code

Display rich text

Two, running lantern effect

Display fonts of different sizes

Related Posts

Performance Optimization Series 002- Layout optimization

Audio and Video learning (5) Getting started with Shell scripts

Android animation system details